很多页面都会有表单提交,验证表单数据是否正确,是要把表单提交到服务端,跟数据库进行比对。然而有些简单的事情,其实前端就可以先验证一下,比如字符格式,输入长度等信息,通过JS对表单基本情况进行验证,避免每次都要去请求服务端,提高网页性能。
验证的正则表达式根据自己的需求可以自行修改。
简单的写了四个验证,分别是用户名、密码、手机和邮箱。
- 以下是html结构
span里面的提示信息设置了隐藏,不符合规则时显示,符合规则后隐藏
<form>
<label>
<b>用户名:</b><input type="text" class="username">
<span>用户名不符合规则</span>
</label>
<label>
<b>密 码:</b><input type="text" class="password">
<span>密码不符合规则</span>
</label>
<label>
<b>手机号:</b><input type="text" class="telphone">
<span>手机号不符合规则</span>
</label>
<label>
<b>邮 箱:</b><input type="text" class="email">
<span>邮箱不符合规则</span>
</label>
<button>登录</button>
</form>
- 以下是CSS样式
* {
margin: 0;
padding: 0;
}
b {
font-weight: 400;
width: 80px;
display: inline-block;
}
form {
width: 500px;
margin: 100px auto;
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 20px;
}
label {
margin: 5px;
}
input {
outline: none;
}
span {
color: red;
display: none;
}
button {
margin-top: 5px;
}
// label有error类名时,input的样式
label.error > input {
border: 1px solid red;
}
// label有error类名时,span的样式
label.error > span {
display: inline;
}
- 以下是JS代码
首先获取需要绑定事件的元素,以及把正则组合为一个对象
var inps = document.querySelectorAll('input')
// 正则组合对象
var regObj = {
// 用户名规则:6-12位数字字母下划线,开头不能是下划线
username: /^[0-9a-z]\w{5,11}$/i,
// 密码规则:6-12位数字字母下划线
password: /^\w{6,12}$/,
// 手机号规则:+86开头可有可无,手机号133或者135或者188号段开头
telphone: /^(\+86)?(133|135|188)\d{8}$/,
email: /^[0-9a-z]\w{5,11}@(qq|163)\.(com|cn)$/
}
单个输入框验证。实时验证,每次输入都会检测一次。
验证不通过,给label加类名error,显示提示信息。验证通过,则去掉error类名,提示信息也隐藏。
将处理事件函数提出来单独写,也可以放进监听器里写的,这里为了让代码更清晰。
// 输入框绑定事件
inps.forEach(function (item) {
item.addEventListener('input',handler)
})
// 输入框处理事件函数----验证函数
function handler () {
//获取到输入的值
var text = this.value
// 输入框的类名与正则的对应成员名取成一样,方便调取
var reg = regObj[this.className]
// 验证不通过
if (!reg.test(text)) {
// label添加error类名
this.parentNode.classList.add('error')
// 给input取消标识符
//验证不通过把input的自定义属性pass删除(后续表单提交验证会用到)
this.removeAttribute('pass')
return
}
// 验证通过
// label移除error类名
this.parentNodinpute.classList.remove('error')
// 给input设置标识符
// 验证通过后给input添加一个自定义属性pass值为1(后续表单提交验证会用到)
this.setAttribute('pass',1)
}
点击表单的提交按钮,验证表单中是否所有输入框都符合规则。
前面有给验证通过的input添加自定义属性pass,可以通过检测含有pass属性的input个数,来确认是否可以提交表单到服务器。
var form = document.querySelector('form')
form.addEventListener('submit',function (e){
// 处理事件对象兼容
e = e || window.event
// 处理取消表单默认事件兼容
if(e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
// 自定义一个计数器,记录含有pass属性的input个数
var count = 0
inps.forEach(function (item) {
var res = item.getAttribute('pass')
// 没有pass属性,即没有通过验证,或者没有书写
if (!res) {
// 他的父亲类名添加error,
item.parentNode.classList.add('error')
// 否则就是通过了,计数器+1
} else {
count++
}
})
//计数器等于输入框的数量时,才说明每条输入框都通过了验证
// 不等于即至少有一个不没有通过验证,或者没有写入信息
if (count !== inps.length) {
alert('请您输入完整的表单')
return
}
alert('提交成功')
})