从现在开始，使用简单优雅的validata.js

Posted 2020-07-13 李健宁

　　表单验证，是后台开发中万年不变的话题，在经历许多实战之后发现

     使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情

　　　　<form data-validate>
    　　　　Enter:
    　　　　<input type="password" data-rule="密码:required;number[请输入一个整数];equals(target)"/>
    　　　　<input type="password" id="target"/>
 　　　　</form>

　　在实例用，form元素中加入了data-validate标记，validate.js会为form标记内的验证控件进行自动验证
　　验证控件使用data-rule标记，data-rule的语法格式是：

　　　　提示名称: 规则(规则参数) [自定义提示];

　　其中 ‘提示名称’与‘自定义提示’都是可选项，某些规则需要传入一个参数，比如equals规则需要传入比较控件的id

　　自定义提示中可以使用{name}与{arg}变量，这在自定义规则中很有用

 

　　validate.js会在验证控件之后加入一个标签<div class="error_msg"></div>该标签的模版在$.validate.errorTemplate中

 

　　添加标签的操作由validateHandler实现，validate.js内置了一个简单的验证后操作处理函数

　　用户可以使用window.validateHandler = function(msg, scrollTo)来自己的验证后处理函数(添加提示标签，滚动到错误控件处)

 

　　validate.js内置了一些规则，定义在 $.validate.rules下，其结构如下:

 　　　　$.validate.rules = {
       　　　　required: { rule: /./, message: ‘不能为空‘ },
       　　　　equals: {
            　　　　action: function (el, rule, val, target) {
             　　　　   return val !== $(‘#‘+target).val();
            　　　　}, message: ‘两次输入的值不一致‘
       　　　　}
　　　　}

　　用户可以往$.validate.rules添加自定义规则，规则中包含了 rule,action,message
　　rule表示为一个正则规则，action表示一个函数验证规则，两者是不能同时拥有
　　message可以是一个“string”也可以是一个函数，如果是“string”类型，那么可以使用{name},{arg}来替换成控件名称与参数

　　如果是函数，其格式是 message : function (name,arg){ return ‘‘ }

　　使用js获取控件验证状态：

　　　　$(‘[data-rule]‘).isValidate() -> bool

　　获取验证消息:

　　　　$(‘form‘).validate(justTest,scrollTo) -> 
   　　　　 param: justTest bool 只是检查，不修改Dom
    　　　　param: scrollTo bool 滚动到错误元素
   　　　　 return { isValidate : bool,
       　　　　  messages:[{
                　　　　      element:jQueryElement,
               　　　　       message:string
               　　　　       }]
     　　　　}