jquery.validate.js使用

浏览数：61 / 时间：2015年06月09日

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 == "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‘);
        }
    });