一次优雅的表单验证设计 - 只会一点前端

相关文章推荐
严肃的烈酒 · vue2.0在table中实现全选和反选_w ...· 1 年前 ·
暗恋学妹的佛珠 · COMException Class ...· 1 年前 ·
勤奋的雪糕 · [C#]Socket通信BeginRecei ...· 1 年前 ·
苦闷的饺子 · java - ...· 1 年前 ·
一身肌肉的酱牛肉 · How do I write a ...· 1 年前 ·
// form表单提交的时候要做的事情
var




    
 validata = function () {
    if (!userser) {
        console.log('username must require!');
        return false;
    } else if (!password) {
        console.log('password must require!');
　　// 提交数据到后台
这个就是一个很基础的验证用户名和密码的验证，如果只有这两个需要校验，ok没有问题。但是往往我们的验证比较复杂，字段也比较多，如果你还是这样子写的话，对不起我只想说我要吐（其实我之前也是这么写的）。当时觉得没有什么，可是随着自己的成长，越看越像一坨屎（嗯，那个我说的是代码，并不是我自己）。
从这段代码我们可以看出几个不好的问题：
1.需要嵌套大量的if else语句，不太美观，而且暴露自己实力低下了。
2.表单提交函数做了很多事情，不管发送数据，还要负责表单的校验。我们编程讲究的就是单一原则，方便函数的复用，不添加额外的副作用。
可以，我们一个一个的来改造，我们现在先来改造第2个问题，（为什么不先改造第一个问题了，废话，是我在写不是你在写，开玩笑的，第一个我们后面慢慢解决）。
且看如下完整代码：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优雅的表单校验</title>
    <style>
            margin: 0;
            padding: 0;
        .myForm {
            width: 300px;
            padding-bottom: 30px;
            border: 1px solid red;
            margin: 100px auto;
        .form-component>div:first-child {
            margin: 10px 20px 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
        input {
            outline: none;
            display: block;
            border: none;
            padding: 10px;
        #submit {
            padding: 5px 20px;
            outline: none;
            border: 1px solid skyblue;
            background-color: skyblue;
            letter-spacing: 1em;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        .errMsg {
            color: red;
            margin: 0 20px;
    </style>
</head>
    <div id="root">
        <form class="myForm">
            <div class="form-component">
                <div><input type="text" class="username" placeholder="请输入用户名"></div>
                    <p class="username-err"></p>
                </div>
            </div>
            <div class="form-component">
                <div><input type="text" class="password" placeholder="请输入密码"></div>
                    <p class="password-err"></p>
                </div>
            </div>
            <button id="submit">提交</button>
        </form>
    </div>
    <script>
        var submit = document.getElementById('submit');
        var username = document.getElementsByClassName(




    
'username')[0];
        var password = document.getElementsByClassName('password')[0];
        var usernameErrText = document.getElementsByClassName('username-err')[0];
        var passworErrText = document.getElementsByClassName('password-err')[0];
        // 点击提交按钮，发送数据（前提是校验通过）
        // 校验规则，用户名和密码不为空即可
    </script>
</body>
</html>
现在我们的雏形搭建好了，现在就来做提交的事情：
// 点击提交按钮，发送数据（前提是校验通过）
        // 校验规则，用户名和密码不为空即可
        var validata = function () {
            usernameErrText.innerHTML = passworErrText.innerHTML = '';
            if (!username.value) {
                usernameErrText.innerHTML = '请填写用户名!';
                return false
            if (!password.value) {
                passworErrText.innerHTML = '请填写密码!';
                return false;
            return true;
        var postData = function () {
            console.log('发送数据给后台');
        submit.onclick = function (e) {
            e.preventDefault();
            if (validata()) {
                postData();
现在我们把验证数据和提交数据放到了一起操作，是不是感觉比之前好多了，如果有一天不需要验证了，那么我们就直接调用postData方法就行了。但是，骚年你真的就这样子满足了嘛，你信不信还有更骚的操作等着你，我们看看这段代码：
Function.prototype.before = function (fn) {
            var _that = this; // 保存原函数的引用
            return function () {
                fn.apply(this, arguments) && _that.apply(this, arguments)
        var validata = function () {
            usernameErrText.innerHTML = passworErrText.innerHTML = '';
            if (!username.value) {
                usernameErrText.innerHTML = '请填写用户名!';
                return false
            if (!password.value) {
                passworErrText.innerHTML = '请填写密码!';
                return false;
            return true;
        var postData = function () {
            console.log('发送数据给后台');
        var fomrSubmit = postData.before(validata);
        submit.onclick = function (e) {
            e.preventDefault();
            fomrSubmit();
现在我们修改了一下代码，重点看一下这里：
Function.prototype.before = function (fn) {
            var _that = this; // 保存原函数的引用
            return function () {
                fn.apply(this, arguments) && _that.apply(this, arguments)
仔细看，仔细瞧，我们这里是不是强化了最初调用before的那个函数，在这里就是postData方法，它本身是就只有发送数据的功能，通过我们的改造，他是不是可以做其他的事情了，这些额外的功能他之前是没有的，如果你你愿意可以一直加上去，比如这样子：
var fomrSubmit = postData.before(validata).before(function(){
console.log(1);
return true;
很奇怪这里为什么要加上return true了？其实一点不奇怪，因为我们最初设计的就是要校验通过才能发送数据的，因为这个设置，所以我们之前执行的函数都需要返回true，才会继续往下执行。当然这个并不是重点，你愿意的话可以取消这个限制，就可以不用返回true也可以执行很多函数了。
当然，有些人是肯定不会喜欢这种修改原型的实现方式的，那我们就换一个方法：
 // Function.prototype.before = function (fn) {
        //     var _that = this; // 保存原函数的引用
        //     return function () {
        //         fn.apply(this, arguments) && _that.apply(this, arguments)
        var before = function(fn1,fn2) {
            return function(){
                fn1.apply(this,arguments) &&
                fn2.apply(this,arguments);
        var validata = function () {
            usernameErrText.innerHTML = passworErrText.innerHTML = '';
            if (!username.value) {
                usernameErrText.innerHTML = '请填写用户名!';
                return false
            if (!password.value) {
                passworErrText.innerHTML = '请填写密码!';
                return false;
            return true;
        var postData = function () {
            console.log('发送数据给后台');
        // var fomrSubmit = postData.before(validata);
        var fomrSubmit = before(validata,postData);
        submit.onclick = function (e) {
            e.preventDefault();
            fomrSubmit();
这里我们定义了before方法，也同样能实现之前的功能。before方法定义的与否只是看自己的习惯而已，我这里还是采用原型上定义方法在继续下面的讲解。
看到这里，聪明的你肯定会说，我点击提交按钮的时候，分别去执行这两个函数不就行了嘛？对啊，我们搞这么半天不就是为了实现这个功能嘛，只是代码写的不一样。
我相信更聪明的你想到了，我们这个实现方式就是AOP，也是装饰者模式在JavaScript中的一种体现。或许现在你觉得这个不重要，但你维护别人的代码或者使用第三方库的时候，在不修改别人源代码的时候（别人的代码或许是混合压缩过的），增强原函数的功能，你就知道这个模式有什么用处了。好了这部份的优化我们就到这里。
接下来我们看一下，关于校验的问题，就像我之前所说的那样如果校验字段很少或者要校验的东西很少（比如用户名判断是否为空，不判断长度）你写if else没有错，但是事与愿违，一般涉及到表单校验是要校验很多的东西。如果你还是if else嵌套下去，我相信你自己都看不下去自己写的代码。
我们先来看一段代码：
 <script>
        var submit = document.getElementById('submit');
        var username = document.getElementsByClassName('username')[0];
        var password = document.getElementsByClassName('password')[0];
        var usernameErrText = document.getElementsByClassName('username-err')[0];
        var passworErrText = document.getElementsByClassName('password-err')[0];
        // 点击提交按钮，发送数据（前提是校验通过）
        // 校验规则，用户名和密码不为空即可
        Function.prototype.before = function (fn) {
            var _that = this; // 保存原函数的引用
            return function () {
                fn.apply(this, arguments) === 0 && _that.apply(this, arguments)
        var postData = function () {
            console.log('发送数据给后台');
        // 定义表单校验对象
        var validataor = (function () {
            // 定义校验规则
            var rules = {
                isNotEmpty: function (dom, errMsg) {
                    if (!dom.value.trim()) {
                        return errMsg;
            // 需要校验的函数集合
            var caches = [];
            // 错误数量
            var errNum = 0;
            return {
                start: function () {
                    for (var i = 0, func; func = caches[i++];) {
                        if (func()) {
                            errNum++;
                add: function (dom, rule, errMsg, errShowDom) {
                    caches.push(function () {
                        var msg = rules[rule](dom, errMsg);
                        msg && (errShowDom.innerHTML = msg) || (errShowDom.innerHTML = '');
                        return msg;
                isCheckAll: 




    
function () {
                    var num = errNum;
                    errNum = 0;
                    caches.length = 0;
                    return num;
        })();
        var fomrSubmit = postData.before(function () {
            validataor.add(username, 'isNotEmpty', '用户名必填', usernameErrText);
            validataor.add(password, 'isNotEmpty', '密码必填', passworErrText);
            validataor.start();
            return validataor.isCheckAll()
        submit.onclick = function (e) {
            e.preventDefault();
            fomrSubmit();
    </script>
这段代码，我们也实现了验证功能，咋一看我擦，怎么这么复杂。没错封装代码就是有可能带来额外的代码，但是你看一下我们还有if else那种难看的嵌套嘛。
这里我们用validataor对象，实现校验规则的新增，检测。
而且这样子写我们还可以随意的配置自己的校验规则：
 // 定义表单校验对象
        var validataor = (function (rules) {
            // 需要校验的函数集合
            var caches = [];
            // 错误数量
            var errNum = 0;
            return {
                start: function () {
                    for (var i = 0, func; func = caches[i++];) {
                        if (func()) {
                            errNum++;
                add: function (dom, rule, errMsg, errShowDom) {
                    caches.push(function () {
                        var msg = rules[rule](dom, errMsg);
                        msg && (errShowDom.innerHTML = msg) || (errShowDom.innerHTML = '');
                        return msg;
                isCheckAll: function () {
                    var num = errNum;
                    errNum = 0;
                    caches.length = 0;
                    return num;
            isNotEmpty: function (dom, errMsg) {
                if (!dom.value.trim()) {
                    return errMsg;
            isPhone: function(){
                // 校验是否是手机号码
看现在我们可以随意配置，你只要知道这个validataor的用法，岂不是很简单，不需要在一个一个if else的去判断，多优雅。而且我们这个validataor对象很方便移植。
聪明的你应该看出了隐藏在代码中的策略模式的使用，这里我就不指出，免得班门弄斧了。
好了改造我们现在差不多了，我们现在需要升级。实际中不可能每一个字段都只有一种校验，有的有着多个校验。我们拿密码距离，密码不能为空而且长度不能小于6位。
现在我们有一个最坏原则，那就是表单校验的其中一个字段有多个校验，我们假设它在校验的时候遇到第一个校验不通过的情景，就停止后面的校验（本来也是这样子），
那么什么是最坏原则了，那就是我们所期望校验的时候，总会存在校验不通过的情况，如果连最坏原则都通过了，那就说明你的所有校验都通过。
我们先来看一段代码：
var Chain = function (fn) {
    this.fn = fn;
    this.nextChain = null;
Chain.prototype.setNextChain = function (nextChain) {
    this.nextChain = nextChain;
Chain.prototype.next = function () {
    var ret = this.fn.apply(this, arguments);
    if (ret === 'next') {
        return this.nextChain && this.nextChain.next.apply(this.nextChain, arguments);
    return ret;
var fn1 = function (value) {
    if (value < 10 && value > 5) {
        console.log('fn1满足');
    else {
        return 'next';
var fn2 = function (value) {
    console.log(value);
    if (value > 10 && value < 20) {
        console.log('fn2满足');
    else {
        return 'next';
var fn3 = function (value) {
    if (value > 30) {
        console.log('fn3满足');
    else {
        return 'next';
var chainF1 = new Chain(fn1);
var chainF2 = new Chain(fn2);
var chainF3 = new Chain(fn3);
chainF1.setNextChain(chainF2);
chainF2.setNextChain(chainF3);
chainF1.next(8);
这段代码，我们测试所给数字的大小范围，通过Chain类的各个实例，我们完全摒弃了以前的if else的嵌套，是不是很优雅。每一个执行函数，如果满足它的要求，就会停止所有的程序执行，如果不满足，那么就把执行权交给下一个chain实例中的执行函数。如果最后的结果返回的不是next那么就代表所有的校验都通过了。
我们现在在优化一下这段代码：
var fn1 = function (value) {
    if (value < 10 && value > 5) {
        console.log('fn1满足');
    else {
        return 'next';
var fn2 = function (value) {
    if (value > 10 && value < 20) {
        console.log('fn2满足');
    else {
        return 'next';
var fn3 = function (value) {
    if (value > 30) {
        console.log('fn3满足');
    else {
        return 'next';
Function.prototype.after = function (fn) {
    var _that = this;
    return function () {
        var ret = _that.apply(this, arguments);
        if (ret === 'next') {
            return fn.apply(this, arguments);
        return ret;
var start = fn1.after(fn2).after(fn3);
start(18);
现在你来来看看这个威力，是不是很强大，聪明的你肯定知道这个after是AOP的实现。
好了，现在有了这段代码我们，就来实现我们的完整校验。
1.支持多字段校验
2.一个字段支持多种校验
3.校验一个出错，停止后面所有的校验
现在我就直接给出完整的代码，我相信你一定能看懂的（不是相信，是你一定能，因为你很棒啊）：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优雅的表单校验</title>
    <style>
            margin: 0;
            padding: 0;
        .myForm {
            width: 300px;
            padding-bottom: 30px;
            border: 1px solid red;
            margin: 100px auto;
        .form-component>div:first-child {
            margin: 10px 20px 5px;
            border: 1px solid #ccc;
            border-radius: 5px




    
;
            overflow: hidden;
        input {
            outline: none;
            display: block;
            border: none;
            padding: 10px;
        #submit {
            padding: 5px 20px;
            outline: none;
            border: 1px solid skyblue;
            background-color: skyblue;
            letter-spacing: 1em;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        .errMsg {
            color: red;
            margin: 0 20px;
    </style>
</head>
    <div id="root">
        <form class="myForm">
            <div class="form-component">
                <div><input type="text" class="username" placeholder="请输入用户名"></div>
                    <p class="username-err errMsg"></p>
                </div>
            </div>
            <div class="form-component">
                <div><input type="password" class="password" placeholder="请输入密码"></div>
                    <p class="password-err errMsg"></p>
                </div>
            </div>
            <button id="submit">提交</button>
        </form>
    </div>
    <script>
        var submit = document.getElementById('submit');
        var username = document.getElementsByClassName('username')[0];
        var password = document.getElementsByClassName('password')[0];
        var usernameErrText = document.getElementsByClassName('username-err')[0];
        var passworErrText = document.getElementsByClassName('password-err')[0];
        // 点击提交按钮，发送数据（前提是校验通过）
        // 校验规则，用户名和密码不为空即可
        Function.prototype.before = function (fn) {
            var _that = this; // 保存原函数的引用
            return function () {
                fn.apply(this, arguments) === 0 && _that.apply(this, arguments)
        Function.prototype.after = function (fn) {
            var _that 




    
= this;
            return function () {
                var ret = _that.apply(this, arguments);
                // 最坏原则，这次校验通过，假设后面有校验不会通过
                if (typeof ret === 'undefined') {
                    return fn.apply(this, arguments);
                // 如果这次校验不通过，那么停止校验，返回错误信息
                return ret;
        var validataor = (function (validataRules) {
            var caches = [];
            var errNum = 0;
            return {
                add: function (dom, rules, errShowDom) {
                    var fnsArr = [];
                    for (var i = 0, ruleObj; ruleObj = rules[i++];) {
                        var ruleArr = ruleObj.rule.split(':');
                        var rule = ruleArr.shift();
                        ruleArr.unshift(dom);
                        ruleArr.push(ruleObj.errMsg);
                        fnsArr.push(validataRules[rule].bind(dom, ...ruleArr));
                    if (fnsArr.length) {
                        var fn = fnsArr.shift();
                        while (fnsArr.length) {
                            fn = fn.after(fnsArr.shift());
                        caches.push({
                            fn: fn,
                            container: errShowDom
                start: function () {
                    for (var i = 0, cacheObj; cacheObj = caches[i++];) {
                        var msg = cacheObj.fn();
                        cacheObj.container.innerHTML = msg || '';
                        imsg && ++errNum;
                    caches = [];
                    var num = errNum;
                    errNum = 0;
                    return num;
            isNotEmpty: function (dom, errMsg) {
                if (!dom.value) {
                    return errMsg;
            isPhone: function () {
                // 校验是否是手机号码
            minlength: function (dom, length, errMsg) {
                if (dom.value.length < length) {
                    return errMsg;
        var postData = function () {
            console.log('发送数据给后台');
        var fomrSubmit = postData.before(function () {
            validataor.add(username, [
                { rule: 'isNotEmpty', errMsg: '用户名必填' }
            ], usernameErrText);
            validataor.add(password, [
                { rule: 'isNotEmpty', errMsg: '密码必填' },
                { rule: 'minlength:10', errMsg: '密码长度必须大于等于10位' },
            ], passworErrText);
            return validataor.start();
        submit.onclick = function (e) {
            e.preventDefault();
            fomrSubmit();
    </script>
</body>
</html>
现在我们只需要自己配置好校验规则，就可以实现不同字段的校验，当然本案例代码肯定只有优化的地方，我现在是写最多的代码，希望理解的够清楚一些。
相比之前的if else现在我个人感觉是好多了。但是我们发现了代码量增多了，多的就是validatator这一段代码，这段代码其实不难。牛逼的你应该能从本案例中发现许多设计模式的运用（策略模式，职责链模式，装饰者模式），还有AOP的风格的编程，你看见确实是增加了代码量，所以实际项目还是要看看引入设计模式会不会得不偿失。
反正在这个例子中，我认为是没有错的，只需要自己配置就行，代码中不变的地方已经被我们封装起来了，变化的地方我们提出来了，其实这就是设计模式通用的手段，还记得before函数嘛，其实这个函数也是设计模式的一种原则开放-封闭（在不修改源码的情况下，增加原函数的功能）。
好了，到这儿就再见了。