输入框校验插件 - jQuery validate

jquery validate插件内置了常用输入框格式的校验，同时支持添加自定义校验；

演示

    
    
    

    
    
    




    


        

            *姓名
            

                
            
        

        

            

                校验
            
        
    

1.git.gif

引入需要的JS文件后，在input 控件中添加required属性即可实现非空校验。

自定义提示文字颜色

查看页面源码发现，提示语有error样式，所以我们在页面中添加error样式即可实现提示语的样式自定义。

image.png

在页面中添加如下样式后，提示语变成了红色

1.git.gif

设定错误提示语位置

插件默认放置错误提示语位置为 input父元素中，我们可以使用如下属性来自定义

//default
errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

结果

        *姓名
        

            
            This field is required.
        
    

修改错误信息位置

function save() {
        $('#passengerForm').validate({
            errorPlacement: function(error, element) {
                error.appendTo(element.parents(".form-group"));
            }
        });
        $('#passengerForm').valid();
    }

结果

        *姓名
        

            
        
        This field is required.

1.git.gif

自定义提示语

插件提供了中文素材，引用即可，当然你也可以手动修改其中的内容；

或者

$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

1.git.gif

自定义校验

$.validator.addMethod("containsChar",function(value,element,params){  
        return value.indexOf(params[0])!=-1||value.indexOf(params[1])!=-1||value.indexOf(params[1])!=-1;
    },"必须包含{0}");

1.git.gif

到此为止，咱们知道了jquery validate可以对输入框进行一些校验，可以自定义错误提示信息、颜色和位置。

下面咱们看看插件自带了哪些常用格式校验：

image.png