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} 的數值")
});

}));