jQuery表单验证

一般用于验证用户输入的信息是否正确，比如长度是否符合要求，然后给用户反馈提示信息；

准备工作：

• 依赖的安装  https://www.bootcdn.cn/

搜索以下内容，引入到项目中；注意位置都放在其他链接的前面，依赖一般先加载；

jQuery

normalize（normalize就是一个css文件，它保证了css样式在主流浏览器下显示基本是一致的；清除掉不必要的东西， 比如body默认有3px边距，引入normalize就不存在这个问题）

实现方法：

第一种：获取input里的内容，然后设置条件进行验证；

第二种：直接给input添加规则data-rule

//选中页面中所有的input[data-rule]

//解析每一个input的验证规则

//验证

<input data-rule="pattern:^[a-z0-9]$|maxlength:10|minlength:2|nullable:false|numeric:false" type="text">

<script>
//这样写会显得很零散；因此给input里面内置一个validator而不是独立的拿来使用；使用constructor（构造函数，构造器）
var validator = {};
validator.validate_maxlength = function(val, rule) {
    ...
    return true;
    ...
    return false;

}
//新建一个模板，专门存储表单验证的规则，validator.js
</script>

两种方法第一种代码会少，而且实现起来更快，但第二种就相当于搭建好一个模板，其他的也可以使用，后面使用更方便

本篇文章采用第二种方法：

首先新建一个文件名为validator.js文件，在文件中封装Validator验证器

//validator.js
$(function() {
    window.Validator = function(val, rule) {
        this.is_valid = function(new_val) {
            var key;
            val = new_val || val; 
            // if(new_val)
            //     val = new_val;
            /*如果不是必填项用户未填写任何内容则直接判定为合法*/
            if (!rule.required && !val)
            return true;

            for (key in rule) {
                /*防止重复检查*/
                if (key === 'required')
                    continue;
                
                /*调用rule中对应的方法*/ 
                var r = this['validate_' + key]();
                if(!r) return false;
            }
        }

        /*用户this.validator_maxlength 或 this.validator_length的前置工作*/
        function pre_length() {
            val = val.toString();
        }

        //设置最大长度规则
        this.validate_maxlength = function() {
            pre_length();
            return val <= rule.maxlength;
        }
        //设置最小长度规则
        this.validate_minlength = function() {
            pre_length();
            return val >= rule.minlength;
        }
        //验证手机号是不是数字
        this.validate_numeric = function() {
            return $.isNumeric(val);
        }
        //验证是否为空；
        this.validate_required = function() {
            var deal_val = $.trim(val); //trim处理字符前后的空格；
            if(!deal_val && deal_val !== 0) 
                return false; //这里if执行结果只有一行省略了{}
            return true;
        }

        //判断用户名是否为字母和数字；
        this.validate_pattern = function() {
            var reg = new RegExp(rule.pattern);
            return  reg.test(val); //测试用户输入的值是否匹配；   
        }
    }
})

在login.js中传入数据测试

$(function() {
//表单验证
    var validator = new Validator('', {
        
    });

    // var result = validator.validate_maxlength();
    // var result = validator.validate_minlength();
    //var result = validator.validate_numeric();
    console.log('result:', result);
})

例如：

 

最大长度为12，用户输入了15位，结果为false，验证通过，其他也可通过类似的方法来验证

改为6，再测试一下，结果就为true；

测试正则规则，用户名只能为字母和数字

 

validator验证器就封装完毕，接下来封装input，新建一个input.js

//input.js
$(function() {
    window.Input = function(selector) {
        var $element, loadthis = this, rule = {required: true};
        this.load_validator = function() {
            var val = this.get_val();//用户输入的值
            this.load_validator = new Validator(val, rule);
        }

        this.get_val = function() {
            return $element.val();
        }

        function init() {
            find_ele();//获取数据
            parse_rule();//解析规则
            loadthis.load_validator();
            listen();
        }
        //监听用户输入的内容改变
        function listen() {
            $element.on('change',function () {
                var r = loadthis.load_validator.is_valid(loadthis.get_val());
                console.log('valid:',r);
            })
        }
        
        //获取选择器
        function find_ele() {
            if (selector instanceof jQuery) {
                $element = selector;
            }else{
                $element = $(selector);
            }
        }
        //解析规则
        function parse_rule() {
            var rule_str = $element.data('rule'); //rule是一个字符串；
            if(!rule_str) return;

            var rule_arr = rule_str.split('|'); //通过|将规则拆分成数组;
            //拆分成对象
            for (var i = 0; i < rule_arr.length; i++) {
                var item_str = rule_arr[i]; //获得单个的数组，再通过冒号分割
                var item_arr = item_str.split(':');
                rule[item_arr[0]] = JSON.parse(item_arr[1]); //rule['maxlength'] = '15';可以看到结果为字符串，加JSON.parse为了将值显示对应形式；
            }

        }

        init();
    }
})

测试：给input框加入data-rule和id

var test = new Input('#test');
var valid = test.load_validator.is_valid();
console.log('valid:', valid);

这里跟着视频做完了，后面有些bug还没有找到，暂时先写到这里，而且个人觉得这个后面很麻烦，尤其让提示错误的那个元素显示对应的内容，后面研究一下validator这个插件