jquery.validate.js 的封装

为什么80%的码农都做不了架构师？>>>   

作为一位前端程序员,使用validate判断表单 能方便很多,但是各种插件的引用不能满足项目的需求,特别是想把验证规则和验证提示消息写于标签内部,这样减轻js代码的书写和更直观的一一对应每个标签对应的判断更重要的是提高效率,开发效率的提高是程序员的乐趣.这里要对validator有了解,不清楚的同学从这里科普 validator 废话不多少,开始贴代码

1.html 中 写标签

<form id ="checkForm">

<input type="text" class="check"  name="adminName" value="" rules='{"required": true}' message='{"required": "请输入账号"}'>

<!--

 class="   check "为需要判断的标签

 rules=rules='{"required": true}'  为验证规则,其中true为boolean类型 不需要" ",普通的字符串都要用" " 这样JSON.parse()才能解析

message='{"required": "请输入账号"}' 为验证提示信息

-->

</form>

2.js 挂载事件

$(function(){ 

     //初始事件 checkForm 为form id,

   //callbackFunction 为回调方法

      initValidator('checkForm',callbackFunction);

})

function callbackFunction(form){

       console.log("验证成功返回form对象,可执行下步操作........")

}

3.写initValidator方法

/*初始表单验证 

 * formId 为表单对应的Id

 * callback 表单验证通过的回调方法

 * 

 * */

function initValidator(formId,callback){

var formObj= $("#"+formId+"");

    var rules = {};//规则

    var messages={};//提示消息

    formObj.find(".check").each(function(){//check为需验证的标签

        var childrenRules=$(this).attr('rules');//标签的验证规则

        if(childrenRules != undefined ){

           var childrenMessage=JSON.parse($(this).attr('message'));//标题的验证提示 转换成json

           childrenRules = JSON.parse(childrenRules);//转换成json

           var nodeName = $(this).attr('name');//标签name

           rules[nodeName]=childrenRules;//赋值对应标签规则

           messages[nodeName]=childrenMessage;//赋值对应提示规则

        }

    })

   

     //初始validate

    var validator =formObj.validate({

         rules: rules,

         messages : messages,

         submitHandler:function(form){

           callback(form);//验证成功后的回调

         } 

    });

}

至此结束,欢迎大家只出不足之处!

 

 

转载于:https://my.oschina.net/oslph/blog/686493