jquery----validation

下载地址

https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.0

dist文件夹是所需要的(将dist目录放到工程中的静态文件夹目录下)

script引用js

　　jquery.validate.min.js

　　messages_zh.min.js

　　additional-methods.min.js

使用参考：

https://www.runoob.com/jquery/jquery-plugin-validate.html 

 

使用

form表单（jsp文件）：

 

js文件

var Validate = function(){
    var handle = function(){
        $("#inputForm").validate({   //需要验证的表单id
            errorElement: 'span',    //如果验证不合格，在表单下面添加一个span标签
            errorClass: 'help-block', //标签的属性class：help-block(红色字体)

            errorPlacement: function (error, element) {
                element.parent().parent().attr("class", "form-group has-error");  //给表单的父级的父级添加一个class：has-error，这些添加属性，都是为了改变表单的样式
                error.insertAfter(element);
            }
        });
        $.validator.addMethod("mobile", function(value, element) {  //验证规则
            var length = value.length;
            var mobile =  /^((13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");
    }  //私有方法
    return {
        init:function(){
            handle();   //通过test来执行handle方法
        }
    }
}();

$(document).ready(function () {
    Validate.init();
})

　　

参考这种样式进行修改的；

 

 

 

默认校验规则说明

• required：true 必输字段
• remote：check.php 使用 ajax 方法调用 check.php 验证输入值
• email：true 必须输入正确格式的电子邮件
• url：true 必须输入正确格式的网址
• date：true 必须输入正确格式的日期
• dateISO：true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
• number：true 必须输入合法的数字(负数，小数)
• digits：true 必须输入整数
• creditcard： 必须输入合法的信用卡号
• equalTo：#field，输入值必须和 #field 相同
• accept： 输入拥有合法后缀名的字符串（上传文件的后缀）
• maxlength：5，输入长度最多是5的字符串(汉字算一个字符)
• minlength：10，输入长度最小是10的字符串(汉字算一个字符)
• rangelength：[5,10]，输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
• range：[5,10]，输入值必须介于 5 和 10 之间
• max：5，输入值不能大于 5
• min：10，输入值不能小于 10

默认提示

messages: {     required: "This field is required.",     remote: "Please fix this field.",     email: "Please enter a valid email address.",     url: "Please enter a valid URL.",     date: "Please enter a valid date.",     dateISO: "Please enter a valid date ( ISO ).",     number: "Please enter a valid number.",     digits: "Please enter only digits.",     creditcard: "Please enter a valid credit card number.",     equalTo: "Please enter the same value again.",     maxlength: $.validator.format( "Please enter no more than {0} characters." ),     minlength: $.validator.format( "Please enter at least {0} characters." ),     rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),     range: $.validator.format( "Please enter a value between {0} and {1}." ),     max: $.validator.format( "Please enter a value less than or equal to {0}." ),     min: $.validator.format( "Please enter a value greater than or equal to {0}." ) }

jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.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} 的数值")
});

}));