JS表单验证

很多页面都会有表单提交，验证表单数据是否正确，是要把表单提交到服务端，跟数据库进行比对。然而有些简单的事情，其实前端就可以先验证一下，比如字符格式，输入长度等信息，通过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('提交成功')
        })