首页 > 代码库 > jquery.validate.js使用

jquery.validate.js使用

1、需引入的js

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.min.js"></script> <!--jquery.validate的中文提示信息--><script type="text/javascript" src="js/jQuery.validate.message_cn.js"></script><!--自己写的一些验证方法,放在js中以便统一调用  例如:手机号的验证--><script type="text/javascript" src="js/additional-methods.js"></script>

2、异步验证  //注意 data传值时使用 userName:$("#userName").val() 后台是获取不到值的!!!!

jQuery("#form1").validate({        rules: {            "user.userName": {                required:true,                remote: {                    type:"post",                    url:"<%=path%>/main/main!main.action",                    data:{                        userName:function(){return $("#userName").val()}                                                                     },                     dataType: "html",                        dataFilter: function(data, type) {                            if (data =http://www.mamicode.com/="true")                                return true;                            else                                return false;                        }                }            }                                },        messages: {            "user.userName": {                required:"请输入用户名称",                remote:"用户名已注册"            }        success: function(label) {            label                .text(‘Ok!‘).addClass(‘valid‘)                .closest(‘.control-group‘).addClass(‘success‘);        }    });

3、调用自己新增手机号验证规则
additional-methods.js 加方法

/********增加手机号验证**********/$.validator.addMethod("mobile",function(value,element){    if((validate_mobile(value))){        return true;    }else{        return false;    }});function validate_mobile(field) {    with (field) {        var patrn = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;        if (!patrn.exec(field)) {            return false;        } else {            return true;        }    }}

页面调用

jQuery("#form1").validate({        rules: {            "user.mobile":{                required: true,                mobile: true,            }                    },        messages: {            "user.mobile":{                required: "请输入手机号",                mobile: "请输入正确的手机号",            }                    },        highlight: function(label) {            jQuery(label).closest(‘.control-group‘).addClass(‘error‘);        },        success: function(label) {            label                .text(‘Ok!‘).addClass(‘valid‘)                .closest(‘.control-group‘).addClass(‘success‘);        }    });

 

jquery.validate.js使用