利用jQuery.validator來做表單驗證，不要太輕鬆（全攻略）

1、介紹

jQuery.validator是給我們用來做表單驗證提交時的一個插件，你可以直接去官網下載，也可以通過菜鳥教程學習和下載該插件

2、使用

2.1下載完成後引入相應的js庫

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

2.2引入之後，在js文件中加載jQuery.validator,設置默認方式

$(document).ready(function(){
	$.validator.setDefaults({       
		  submitHandler: function(form) {    
		 		form.submit();    
		}       
	});
});

2.3對錯誤提示信息的標籤進行css修改：

/** 表單驗證 樣式佈局 */
label.error {
	position: absolute;
	right: 18px;
	top: 5px;
	color: #ef392b;
	font-size: 12px;
	z-index: 3;
}

默認提示用的是lable標籤，在發生錯誤時（也就是驗證沒通過時）會在錯誤元素後追加lable標籤，錯誤信息寫在lable裏面的，我們最好改造一下，錯誤標籤的class是error,最好設置z-index高一點，因爲如果不設置大一點，可能會被遮擋住，因爲我們用一些其他input插件時可能樣式是層疊的，這樣就會擋住。這個是全局的。

局部如果不滿意：也可以調，比如我要調整class爲append-input的div的裏面錯誤提示的效果

.append-input .error{
	z-index: 3;
	margin-right: 25px;
}

2.4驗證表單數據：之前加載了默認方式之後，我們就可以進行驗證了，看下代碼

$("#form-customer-add").validate({
        rules: {
            loginAccountName: {
                accountExtend: "autoCreatAccountAndPassword",
                remote: {
                    url: ctx + "vip/customer/checkLoginAccount",
                    type: "post",
                    dataType: "json",
                    cache:false,
                    async:false,
                    data: {
                        loginAccountName: function () {
                            return $.trim($("#loginAccountName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        var result = JSON.parse(data);
                        if (result.code == 0) return true;
                        else return false;
                    }
                }
            },
            password: {
                passwordExtend:true,
                required:true
            },
            nickname:{
                required:true,
                nicknameExtend:true
            },
            telephones:{
                required:true,
                telephoneExtend:true,
                inputUniquenessExtend:["telephones","該手機號已經輸入過了"],
                checkUniquenessExtend:["telephone",ctx + "vip/customer/checkPhone","手機號已經存在"]
            },
            emails:{
                emilExtend:true
            },
            trueName:{
                chineseAndLetterExtend:true,
                minlength:2
            },
            idNumber:{
                idNumberExtend:true
            },
            company:{
                numberExtend:"other"
            },
            job:{
                numberExtend:"other"
            },
            income:{
                numberExtend:true
            },
            homeAddress:{
                numberExtend:"other",
                letterExtend:"other"
            }
        },
        messages: {
            loginAccountName:{
                remote:"該賬戶已經被註冊"
            }
        },
        errorPlacement:function(error,element) {
            error.insertAfter(element);
        },
        submitHandler: function (form) {
            add();
        }
    });

    function add() {

        var data = getFormDateReturnForm("form-customer-add");//得到表單數據

        var avatarFile = $("input[name ='avatarFile']")[0].files[0];
        data.append("avatarFile", avatarFile);

        /*-------------------獲得愛好-------------------------*/
        var hobbyStr = $('#hobbys').val();//獲取愛好的值
        if(!isEmptyForString(hobbyStr)){
            var hobbys = hobbyStr.split(",");//得到愛好數組
            data.append("hobbys",hobbys);
        }

        /*-------------------獲得車品牌/車系/車型---------------------------*/
        var carsObj = $("span[name='cars']");
        if(!isEmptyForObject(carsObj)){
            var cars = new Array();
            $("span[name='cars']").each(function(){
                cars.push($(this).text());
            });
            data.append("cars",cars);
        }

        /*-------------------獲得車牌---------------------------*/
        var carLicensesObj = $("span[name='carLicensesSpan']");
        if(!isEmptyForObject(carLicensesObj)){
            var carLicenses = new Array();
            $("span[name='carLicensesSpan']").each(function(){
                cars.push($(this).text());
            });
            data.append("carLicenses",carLicenses);
        }

        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "vip/customer/add",
            data: data,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            async: false,
            error: function (request) {
                $.modal.alertError("系統錯誤");
            },
            success: function (data) {
                $.operate.saveSuccess(JSON.parse(data));
            }
        });
    }

代碼太長，我們拆分解釋：

(1)

$("#form-customer-add").validate({

這個表示的是加載你的form表單的id

<form class="form-horizontal m" id="form-customer-add">

(2)

$("#form-customer-add").validate({
        rules: {

rules表示返回元素的驗證規則，意思就是說我們驗證規則都寫在這裏面

(3)

$("#form-customer-add").validate({
        rules: {
            loginAccountName: {

loginAccountName 表示的是我們自己表單中元素的name值，說明一下，jQuery.validator驗證匹配是按照name來進行匹配的

<div class="form-group">
    <label class="col-sm-3 control-label ">用戶賬號：</label>
    <div class="col-sm-8">
        <input class="form-control" type="text" id="loginAccountName" name="loginAccountName" placeholder="請填寫用戶賬號"/>
    </div>
</div>

(4)

$("#form-customer-add").validate({
        rules: {
            loginAccountName: {
                accountExtend: "autoCreatAccountAndPassword",
                remote: {

accountExtend 表示的是我們自己定義的驗證規則，remote是插件提供的向後臺發送請求驗證的規則

（4.1）romote的使用

remote: {
      url: ctx + "vip/customer/checkLoginAccount",
      type: "post",
      dataType: "json",
      cache:false,
      async:false,
      data: {
          loginAccountName: function () {
                return $.trim($("#loginAccountName").val());
          }
      },
      dataFilter: function (data, type) {
          var result = JSON.parse(data);
          if (result.code == 0) return true;
          else return false;
      }
}

說明一下，這個使用時加入 async:false表示同步請求，true或者不加這個屬性表示異步請求

data表示你要傳入到後臺的數據，裏面的鍵值對形式的參數表示後臺接受參數的名字和值，這個值是個方法，返回的就是你要傳入後臺的值，類似於{loginAccount:"test12345"}這種形式

dataFileter表示的是你返回的信息，data是後臺返回的數據，自己做判定，最後該函數返回true表示通過驗證，false表示沒有通過驗證，提示錯誤信息。

這裏就直接說明messages的作用吧，就是驗證沒有通過的錯誤提示信息，這個跟rules同級

看這段代碼：

messages: {
     loginAccountName:{
           remote:"該賬戶已經被註冊"
     }
}

messages裏面的結構和rules裏面的層級結構是一樣的，沒有順序之分，可選擇性指定提示信息

因爲插件自帶的一些驗證方法，包含默認提示信息，如果你想用自己的提示信息，直接這樣指定就可了

（4.2自定義驗證規則）

自定義驗證規則

上面已經提到了accountExtend是我們自己定義的驗證規則

自定義驗證規則必須調用addMethod方法

舉例：

jQuery.validator.addMethod("passwordExtend", function (value, element) {
        var length = value.length;
        return this.optional(element) || (FormVerifyRegEx.letterAndNumber.test(value) && length >= 8 && length <= 20);
    }, "<i class='fa fa-times-circle'>密碼必須爲8-12位字母和數字組合</i>");

第一個參數:自定義規則名字

passwordExtend 是我們爲自定義規則取的名字

第二個參數是一個方法，最重要（有三個參數）：

value表示的是聚焦的輸入框的值，我們要驗證的就是這個值

element表示的是當前聚焦的節點元素

還有個參數params,表示你傳遞進來的參數，傳遞一個參數直接寫就是了，多參數用數組[]，這個也可以不寫

第三個參數表示錯誤的提示信息：這個提示信息寫在這裏不能是動態的，只能是死的

提示：方法內部返回false表示沒有通過驗證，true表示通過驗證，方法內部規則自己隨意寫，保證返回就行了

this.optional(element) 表示可以爲空值

調用：傳入true就會默認調用了，false就不會調用；required是該插件內置的驗證規則，表示不能爲空，false就不會調用，true就會調用，你不寫也不會調用

$("#form-customer-add").validate({
        rules: {
            password: {
                passwordExtend:true,
                required:true
            }
        }
)};

看下另一個例子：

/**
     * 驗證數字
     * 傳入true表示必須是數字，
     * "false"輸入內容不能包含數字,
     * "other"表示是輸入內容不能全是數字
     */
    $.validator.addMethod("numberExtend", function (value, element, params) {
        console.log(params);
        if (params === true) {
            $.validator.messages.numberExtend = "<i class='fa fa-times-circle'>輸入內容必須是0-9數字</i>";
            return this.optional(element) || (FormVerifyRegEx.number.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.number.test(value.substr(i,1))){
                    $.validator.messages.numberExtend = "<i class='fa fa-times-circle'>輸入內容不能包含數字</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.numberExtend = "<i class='fa fa-times-circle'>輸入內容不能全是數字</i>";
        return this.optional(element) || !(FormVerifyRegEx.number.test(value));
    });

這個是另一種寫法，說明一下：

$.validator.messages.numberExtend 表示根據情況動態修改錯誤提示信息，這裏的numberExtend 要和第一個參數你定義的規則名一樣

你也看到了，爲什麼我接收false用了“”，這裏就有個關鍵了，如果傳值爲false，是不會調用這個驗證規則的，所以你必須寫成其他形式的參數，true可以傳遞進來也能拿到，默認寫true就表示調用這個驗證方法

調用：

company:{
     numberExtend:"other"
},

寫到這裏，其實我們需要的配置基本就完了，說明一下，其他不用配置用默認的就行，關於select、和redio看菜鳥教程就行了，沒什麼講的，在標籤上寫上幾個屬性就可以了，自己去參考

errorPlacement:function(error,element) {
            error.insertAfter(element);
        },
submitHandler: function (form) {
            add();
        }

這個呢，errorPlacement 表示錯誤信息放在那裏，默認就是我寫的這個，追加在元素後面，不過這個我們不用去指定，刪除就是了，

submitHandler 表示的是驗證全部通過後執行的函數，點擊type爲submit的按鈕自動觸發這個函數，當我們點擊提交後驗證通過就會觸發這個函數，

<button type="submit" class="btn btn-primary">提交</button>

add()就是我們自己寫的向後臺發送數據的方法了

說明：在驗證的時候，我們寫在同一個name裏面的驗證規則是從上至下依次執行了，一旦上面的驗證沒有通過，下面的驗證也就不會繼續驗證，上面的驗證通過後繼續下面的驗證

homeAddress:{
       numberExtend:"other",
       letterExtend:"other"
}

像這樣，先執行numberExtend驗證，再執行letterExtend驗證，所有的驗證規則都可以結合起來使用

解決相同name元素只驗證第一個的問題

/**
 * 解決jquery表單驗證name值相同只驗證第一個的問題
 */
$(function () {
    function jqueryVerify() {
        if ($.validator) {
            $.validator.prototype.elements = function () {
                var validator = this,
                    rulesCache = {};
                // Select all valid inputs inside the form (no submit or reset buttons)
                return $(this.currentForm)
                    .find("input, select, textarea, [contenteditable]")
                    .not(":submit, :reset, :image, :disabled")
                    .not(this.settings.ignore)
                    .filter(function () {
                        var name = this.id || this.name || $(this).attr("name"); // For contenteditable
                        if (!name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }
                        // Set form expando on contenteditable
                        if (this.hasAttribute("contenteditable")) {
                            this.form = $(this).closest("form")[0];
                        }
                        // Select only the first element for each name, and only those with rules specified
                        if (name in rulesCache || !validator.objectLength($(this).rules())) {
                            return false;
                        }
                        rulesCache[name] = true;
                        return true;
                    });
            }
        }
    }

    jqueryVerify();
});

最後福利時間，我寫了個完整的地驗證規則，大部分都能直接使用：

通用js,內置一些常用方法：common.js

//獲得項目名稱
function getPath() {
	var pathName = window.document.location.pathname;
	var projectName = pathName
			.substring(0, pathName.substr(1).indexOf('/') + 1);
	return projectName;
}

// 動態給Date對象添加新的方法
Date.prototype.formatDateTime = function() {
	var y = this.getFullYear();
	var m = this.getMonth() + 1;
	var d = this.getDate();
	var hh = this.getHours();
	var mm = this.getMinutes();
	var ss = this.getSeconds();
	return y + "-" + formatNumber(m) + "-" + formatNumber(d) + " "
			+ formatNumber(hh) + ":" + formatNumber(mm) + ":"
			+ formatNumber(ss);
}

// 動態給Date對象添加新的方法
Date.prototype.formatDate = function() {
	var y = this.getFullYear();
	var m = this.getMonth() + 1;
	var d = this.getDate();
	return y + "-" + formatNumber(m) + "-" + formatNumber(d);
}

// 位數不夠，就使用0補位
function formatNumber(value) {
	if (value < 10) {
		value = '0' + value;
	}
	return value;
}

/**
 * 判斷字符串是否爲空
 * 
 * @param string
 * @returns
 */
function isEmptyForString(string) {
	if (string === null || string === "" || string === undefined) {
		return true;
	}
	return false;
}

/**
 * 判斷對象是否爲空
 * 
 * @param object
 * @returns
 */
function isEmptyForObject(object) {
	if (object === null || object === undefined) {
		return true;
	}
	return false;
}

// 拿到表單中的數據，返回類對象
function getFormData(id) {
	var d = {};
	var t = $('#' + id).serializeArray();
	$.each(t, function() {
		d[this.name] = this.value;
	});
	return d;
}

//拿到表單中的數據，返回表單對象
function getFormDateReturnForm(id) {
	var form = new FormData();
	var t = $('#' + id).serializeArray();
	$.each(t, function() {
		form.append(this.name,this.value);
	});
	return form;
}

//重置表單,刷新表格數據
function formReset(formName){
	document.getElementById(formName).reset();
	$.table.search(formName);//我這裏是用的bootstrap,所以這個是刷新表格的，上面的是重置表單
}

function getAge2Birth(str) {
	var strBirthday = str.split(" ");
	var returnAge;
	var strBirthdayArr = strBirthday[0].split("-");
	var birthYear = strBirthdayArr[0];
	var birthMonth = strBirthdayArr[1];
	var birthDay = strBirthdayArr[2];

	d = new Date();
	var nowYear = d.getFullYear();
	var nowMonth = d.getMonth() + 1;
	var nowDay = d.getDate();

	if (nowYear == birthYear) {
		returnAge = 0;// 同年 則爲0歲
	} else {
		var ageDiff = nowYear - birthYear; // 年之差
		if (ageDiff > 0) {
			if (nowMonth == birthMonth) {
				var dayDiff = nowDay - birthDay;// 日之差
				if (dayDiff < 0) {
					returnAge = ageDiff - 1;
				} else {
					returnAge = ageDiff;
				}
			} else {
				var monthDiff = nowMonth - birthMonth;// 月之差
				if (monthDiff < 0) {
					returnAge = ageDiff - 1;
				} else {
					returnAge = ageDiff;
				}
			}
		} else {
			returnAge = -1;// 返回-1 表示出生日期輸入錯誤 晚於今天
		}
	}
	return returnAge;// 返回週歲年齡
}

function getDate(dateStr){
	var str = dateStr.split(" ");
	var strArr = str[0].split("-");
	var Year = strArr[0];
	var Month = strArr[1];
	var Day = strArr[2];
	return new Date(Year,Month,Day);
}

function getNowDate(){
	d = new Date();
	var nowYear = d.getFullYear();
	var nowMonth = d.getMonth() + 1;
	var nowDay = d.getDate();
	return nowYear + "-" + formatNumber(nowMonth) + "-" + formatNumber(nowDay);
}

/* min<=取值<=max*/
function getRandomNum(min,max)
{
	var Range = max - min;
	var Rand = Math.random();
	return (min + Math.round(Rand * Range));
}

自定義驗證規則：form-verify.js

/**
 * 定義正則表達式驗證規則
 * @type {{plane: RegExp, electricVehicleLicence: RegExp, idCard: RegExp, licencePlate: RegExp, telephone: RegExp, url: RegExp, chinese: RegExp, number: RegExp, dateIso: RegExp, chineseAndLetterAndNumber: RegExp, letterAndNumber: RegExp, letter: RegExp, email: RegExp}}
 */
var FormVerifyRegEx = {
    //匹配中文
    chinese: /^[\u4e00-\u9fa5]{0,}$/,
    //匹配字母
    letter: /^[a-zA-Z]*$/,
    //匹配數字
    number: /^[0-9]*$/,
    //匹配字母和數字
    letterAndNumber: /^[a-zA-Z0-9]*$/,
    //匹配中文和字母
    chineseAndLetter: /^[\u4e00-\u9fa5a-zA-Z]+$/,
    //匹配中文字母和數字
    chineseAndLetterAndNumber: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
    //匹配中文字母數字和下劃線
    chineseAndLetterAndNumberAndUnder: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,
    //匹配中文字母數字和下劃線和短橫線
    chineseAndLetterAndNumberAndLine:/^[\u4e00-\u9fa5a-zA-Z0-9_\-]+$/,
    //匹配手機號
    telephone: /^1[34578]\d{9}$/,
    //匹配座機號
    plane: /^(0\d{2,3}-)?\d{7,8}$/g,
    //匹配電子郵箱
    email: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
    //匹配身份證
    idCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    //匹配傳統汽車牌照
    licencePlate: /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/,
    //匹配電動車牌照
    electricVehicleLicence: /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/,
    //匹配url
    url: /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i,
    //匹配日期格式(yy-MM-dd)
    dateIso: /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/
};

/**
 * 向jquery表單驗證追加驗證方法
 */
$(function () {

    /**
     * 驗證6-12位賬號
     * 傳入true,表示開啓驗證
     */
    jQuery.validator.addMethod("accountExtend", function (value, element, params) {
        var length = value.length;
        return (FormVerifyRegEx.letterAndNumber.test(value) && length >= 6 && length <= 12);
    }, "<i class='fa fa-times-circle'>賬號必須爲6-12位字母和數字組合</i>");

    /**
     * 驗證密碼
     * 傳入true,表示開啓驗證
     */
    jQuery.validator.addMethod("passwordExtend", function (value, element) {
        var length = value.length;
        return this.optional(element) || (FormVerifyRegEx.letterAndNumber.test(value) && length >= 8 && length <= 20);
    }, "<i class='fa fa-times-circle'>密碼必須爲8-12位字母和數字組合</i>");

    /**
     * 驗證暱稱
     * 傳入true,表示開啓驗證
     */
    jQuery.validator.addMethod("nicknameExtend", function (value, element) {
        var chineseAndOtherLength = 0;
        var numberAndLetter = 0;
        for(var i=0;i<value.length;i++){
            if(FormVerifyRegEx.number.test(value.substr(i,1)) || FormVerifyRegEx.letter.test(value.substr(i,1))){
                numberAndLetter++;
            }else {
                chineseAndOtherLength++;
            }
        }
        var length = chineseAndOtherLength + numberAndLetter/2;
        return this.optional(element) ||  (length >= 1 && length <=20);
    }, "<i class='fa fa-times-circle'>暱稱必須在1-20箇中文，1個符號相當於1箇中文，2個數字/英文相當於1箇中文</i>");

    /**
     * 驗證汽車牌照
     * 傳入true,表示開啓驗證
     */
    jQuery.validator.addMethod("licenceExtend", function (value, element) {
        var length = value.length;
        return this.optional(element) || (FormVerifyRegEx.licencePlate.test(value)) || (FormVerifyRegEx.electricVehicleLicence.test(value));
    }, "<i class='fa fa-times-circle'>汽車牌照格式輸入錯誤</i>");


    /**
     * 驗證數字
     * 傳入true表示必須是數字，
     * "false"輸入內容不能包含數字,
     * "other"表示是輸入內容不能全是數字
     */
    $.validator.addMethod("numberExtend", function (value, element, params) {
        console.log(params);
        if (params === true) {
            $.validator.messages.numberExtend = "<i class='fa fa-times-circle'>輸入內容必須是0-9數字</i>";
            return this.optional(element) || (FormVerifyRegEx.number.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.number.test(value.substr(i,1))){
                    $.validator.messages.numberExtend = "<i class='fa fa-times-circle'>輸入內容不能包含數字</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.numberExtend = "<i class='fa fa-times-circle'>輸入內容不能全是數字</i>";
        return this.optional(element) || !(FormVerifyRegEx.number.test(value));
    });

    /**
     * 驗證中文
     * 傳入true表示必須是中文，
     * "false" 表示是輸入內容不能包含中文,
     * "other" 表示是輸入內容不能全是中文
     */
    $.validator.addMethod("chineseExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.chineseExtend = "<i class='fa fa-times-circle'>輸入內容必須是中文</i>";
            return this.optional(element) || (FormVerifyRegEx.chinese.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.chinese.test(value.substr(i,1))){
                    $.validator.messages.chineseExtend = "<i class='fa fa-times-circle'>輸入內容不能包含中文</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.chineseExtend = "<i class='fa fa-times-circle'>輸入內容不能全是中文</i>";
        return this.optional(element) || !(FormVerifyRegEx.chinese.test(value));
    });

    /**
     * 驗證英文字母
     * 傳入true表示必須是字母，
     * "false"表示輸入內容不能包含英文字母，
     * "other"表示輸入內容不能是純字母
     */
    $.validator.addMethod("letterExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.letterExtend = "<i class='fa fa-times-circle'>輸入內容必須是英文字母</i>";
            return this.optional(element) || (FormVerifyRegEx.letter.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.letter.test(value.substr(i,1))){
                    $.validator.messages.letterExtend = "<i class='fa fa-times-circle'>輸入內容不能包含英文字母</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.letterExtend = "<i class='fa fa-times-circle'>輸入內容不能全是英文字母</i>";
        return this.optional(element) || !(FormVerifyRegEx.letter.test(value));
    });

    /**
     * 驗證字母、數字
     * 傳入true表示必須是字母、數字，
     * "false"表示輸入內容不能包含數字或字母，
     * "other" 表示是輸入內容除了包含數字或字母，還必須包含額外字符
     */
    $.validator.addMethod("letterAndNumberExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.letterAndNumberExtend = "<i class='fa fa-times-circle'>輸入內容必須是字母、數字</i>";
            return this.optional(element) || (FormVerifyRegEx.letterAndNumber.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.letterAndNumber.test(value.substr(i,1))){
                    $.validator.messages.letterAndNumberExtend = "<i class='fa fa-times-circle'>輸入內容不能包含數字或字母</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.letterAndNumberExtend = "<i class='fa fa-times-circle'>輸入內容除了包含數字或字母，還必須包含額外字符</i>";
        return this.optional(element) || !(FormVerifyRegEx.letterAndNumber.test(value));
    });


    /**
     * 驗證字母、中文
     * 傳入true表示必須是字母、中文，
     * "false"表示輸入內容不能包含字母或中文，
     * "other"表示是除了包含字母或中文，還必須包含額外字符
     */
    $.validator.addMethod("chineseAndLetterExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.chineseAndLetterExtend = "<i class='fa fa-times-circle'>輸入內容必須是字母、中文</i>";
            return this.optional(element) || (FormVerifyRegEx.chineseAndLetter.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.chineseAndLetter.test(value.substr(i,1))){
                    $.validator.messages.chineseAndLetterExtend = "<i class='fa fa-times-circle'>輸入內容不能包含字母或中文</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.chineseAndLetterExtend = "<i class='fa fa-times-circle'>輸入內容除了包含字母或中文，還必須包含額外字符</i>";
        return this.optional(element) || !(FormVerifyRegEx.chineseAndLetter.test(value));
    });

    /**
     * 驗證字母、數字、中文
     * 傳入true表示必須是字母、數字、中文，
     * "false"表示輸入內容不能包含字母、數字或中文，
     * "other"表示是除了包含字母、數字或中文，還必須包含額外字符
     */
    $.validator.addMethod("chineseAndLetterAndNumberExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.chineseAndLetterAndNumberExtend = "<i class='fa fa-times-circle'>輸入內容必須是字母、數字、中文</i>";
            return this.optional(element) || (FormVerifyRegEx.chineseAndLetterAndNumber.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.chineseAndLetterAndNumber.test(value.substr(i,1))){
                    $.validator.messages.chineseAndLetterAndNumberExtend = "<i class='fa fa-times-circle'>輸入內容不能包含字母、數字或中文</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.chineseAndLetterAndNumberExtend = "<i class='fa fa-times-circle'>輸入內容除了包含字母、數字或中文，還必須包含額外字符</i>";
        return this.optional(element) || !(FormVerifyRegEx.chineseAndLetterAndNumber.test(value));
    });


    /**
     * 驗證字母、數字、中文、下劃線
     * 傳入true表示必須是字母、數字、中文，
     * "false"表示輸入內容不能包含字母、數字、中文或下劃線，
     * "other"表示是除了包含字母、數字、中文或下劃線，還必須包含額外字符
     */
    $.validator.addMethod("chineseAndLetterAndNumberAndUnderExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.chineseAndLetterAndNumberAndUnderExtend = "<i class='fa fa-times-circle'>輸入內容必須是字母、數字、中文、下劃線</i>";
            return this.optional(element) || (FormVerifyRegEx.chineseAndLetterAndNumberAndUnder.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.chineseAndLetterAndNumberAndUnder.test(value.substr(i,1))){
                    $.validator.messages.chineseAndLetterAndNumberAndUnderExtend = "<i class='fa fa-times-circle'>輸入內容不能包含字母、數字、中文或下劃線</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.chineseAndLetterAndNumberAndUnderExtend = "<i class='fa fa-times-circle'>輸入內容除了包含字母、數字、中文或下劃線，還必須包含額外字符</i>";
        return this.optional(element) || !(FormVerifyRegEx.chineseAndLetterAndNumberAndUnder.test(value));
    });


    /**
     * 驗證字母、數字、中文、下劃線、短橫線
     * 傳入true表示必須是字母、數字、中文、短橫線，
     * "false"表示輸入內容不能包含字母、數字、中文、下劃線或短橫線，
     * "other"表示是除了包含字母、數字、中文、下劃線或短橫線，還必須包含額外字符
     */
    $.validator.addMethod("chineseAndLetterAndNumberAndLineExtend", function (value, element, params) {
        if (params === true) {
            $.validator.messages.chineseAndLetterAndNumberAndLineExtend = "<i class='fa fa-times-circle'>輸入內容必須是字母、數字、中文、下劃線、短橫線</i>";
            return this.optional(element) || (FormVerifyRegEx.chineseAndLetterAndNumberAndLine.test(value));
        }else if(params === "false"){
            var sign = true;
            for(var i=0;i<value.length;i++){
                if(FormVerifyRegEx.chineseAndLetterAndNumberAndLine.test(value.substr(i,1))){
                    $.validator.messages.chineseAndLetterAndNumberAndLineExtend = "<i class='fa fa-times-circle'>輸入內容不能包含字母、數字、中文、下劃線或短橫線</i>";
                    sign = false;
                    break;
                }
            }
            return this.optional(element) || sign;
        }
        $.validator.messages.chineseAndLetterAndNumberAndLineExtend = "<i class='fa fa-times-circle'>輸入內容除了包含字母、數字、中文、下劃線或短橫線，還必須包含額外字符</i>";
        return this.optional(element) || !(FormVerifyRegEx.chineseAndLetterAndNumberAndLine.test(value));
    });

    /**
     * 驗證身份證
     * 傳入參數爲true，即開啓驗證
     */
    jQuery.validator.addMethod("idNumberExtend", function (value, element) {
        var length = value.length;
        return this.optional(element) || (FormVerifyRegEx.idCard.test(value));
    }, "<i class='fa fa-times-circle'>身份證件號輸入格式有誤</i>");

    /**
     * 驗證郵箱
     * 傳入參數爲true，即開啓驗證
     */
    jQuery.validator.addMethod("emilExtend", function (value, element) {
        var length = value.length;
        return this.optional(element) || (FormVerifyRegEx.email.test(value));
    }, "<i class='fa fa-times-circle'>郵箱格式輸入錯誤</i>");

    /**
     * 驗證手機號碼
     * 傳入參數爲true，即開啓驗證
     */
    jQuery.validator.addMethod("telephoneExtend", function (value, element) {
        return this.optional(element) || (FormVerifyRegEx.telephone.test(value))
    }, "<i class='fa fa-times-circle'>請輸入正確的11位有效手機號碼</i>");

    /**
     * 驗證座機號碼
     * 傳入參數爲true，即開啓驗證
     */
    jQuery.validator.addMethod("planeExtend", function (value, element) {
        return this.optional(element) || (FormVerifyRegEx.plane.test(value))
    }, "<i class='fa fa-times-circle'>請輸入正確的8位有效座機號碼</i>");

    /**
     * 驗證url地址
     * 傳入參數爲true，即開啓驗證
     */
    jQuery.validator.addMethod("urlExtend", function (value, element) {
        return this.optional(element) || (FormVerifyRegEx.url.test(value))
    }, "<i class='fa fa-times-circle'>請輸入正確的URL地址鏈接</i>");

    /**
     * 驗證時間格式爲yy-MM-dd
     * 傳入參數爲true，即開啓驗證
     */
    jQuery.validator.addMethod("dateExtend", function (value, element) {
        return this.optional(element) || (FormVerifyRegEx.dateIso.test(value))
    }, "<i class='fa fa-times-circle'>請輸入格式爲yy-MM-dd</i>");


    /**
     * 後臺檢測唯一性
     * 傳入參數params爲數組，第一個參數是傳到後臺的名字，第二個是url地址，第三個爲錯誤提示信息
     * 格式爲：checkUniquenessExtend:["telephone",ctx + "vip/customer/checkPhone","手機號已經存在"]這種
     */
    jQuery.validator.addMethod("checkUniquenessExtend", function (value, element,params) {
        if(isEmptyForString(value)){
            return this.optional(element);
        }
        if(isEmptyForObject(params) || params.length <3){
            return this.optional(element);
        }
        var data = {};
        data[params[0]] = value.trim();
        var isUniqueness = true;
        $.ajax({
            type: "POST",
            url: params[1],
            data: data,
            async: false,
            success: function(result){
                //這個是後臺傳過來的數據，code=0，表示沒有找到相同數據，也就是唯一的，
                //這個需要根據你自己的返回來判定，記住如果後臺沒有找到數據就說明了唯一性，那麼這裏isUniqueness就要賦值爲true，表示通過驗證
                if (result.code === 0){
                    isUniqueness = true;
                }else {
                    isUniqueness = false;
                    $.validator.messages.checkUniquenessExtend = "<i class='fa fa-times-circle'>"+params[2]+"</i>";
                }

            },
            error:function () {
                $.validator.messages.checkUniquenessExtend = "提交數據出錯";
            }
        });
        return this.optional(element) || isUniqueness;
    });

    /**
     * 校驗輸入唯一性，相同name數據，校驗是否已經輸入
     * 傳入格式：第一個傳入值爲相同name元素的name值，第二個爲錯誤信息提示
     * 例子：inputUniquenessExtend:["telephones","該手機號已經輸入過了"]
     */
    jQuery.validator.addMethod("inputUniquenessExtend", function (value,element,params) {
        if(isEmptyForString(value)){
            return this.optional(element);
        }
        if(isEmptyForObject(params) || params.length <2){
            return this.optional(element);
        }
        var isUniqueness = true;
        var obj = $("input[name ='"+params[0]+"']");
        if(!isEmptyForObject(obj) && obj.length >1){
            $("input[name='"+params[0]+"']").each(function(){
                if(value === $(this).val() && element.id != $(this).attr("id")){
                    isUniqueness = false;
                    $.validator.messages.inputUniquenessExtend = "<i class='fa fa-times-circle'>"+params[1]+"</i>";
                    return false;
                }
            });
        }
        return this.optional(element) || isUniqueness;
    });

});


/**
 * 解決jquery表單驗證name值相同只驗證第一個的問題
 */
$(function () {
    function jqueryVerify() {
        if ($.validator) {
            $.validator.prototype.elements = function () {
                var validator = this,
                    rulesCache = {};
                // Select all valid inputs inside the form (no submit or reset buttons)
                return $(this.currentForm)
                    .find("input, select, textarea, [contenteditable]")
                    .not(":submit, :reset, :image, :disabled")
                    .not(this.settings.ignore)
                    .filter(function () {
                        var name = this.id || this.name || $(this).attr("name"); // For contenteditable
                        if (!name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }
                        // Set form expando on contenteditable
                        if (this.hasAttribute("contenteditable")) {
                            this.form = $(this).closest("form")[0];
                        }
                        // Select only the first element for each name, and only those with rules specified
                        if (name in rulesCache || !validator.objectLength($(this).rules())) {
                            return false;
                        }
                        rulesCache[name] = true;
                        return true;
                    });
            }
        }
    }

    jqueryVerify();
});


/*   jQuery.validator()內置方法
* required()	Boolean	必填驗證元素。
required(dependency-expression)	Boolean	必填元素依賴於表達式的結果。
required(dependency-callback)	Boolean	必填元素依賴於回調函數的結果。
remote(url)	Boolean	請求遠程校驗。url 通常是一個遠程調用方法。
minlength(length)	Boolean	設置最小長度。
maxlength(length)	Boolean	設置最大長度。
rangelength(range)	Boolean	設置一個長度範圍 [min,max]。
min(value)	Boolean	設置最小值。
max(value)	Boolean	設置最大值。
email()	Boolean	驗證電子郵箱格式。
range(range)	Boolean	設置值的範圍。
url()	Boolean	驗證 URL 格式。
date()	Boolean	驗證日期格式（類似 30/30/2008 的格式，不驗證日期準確性只驗證格式）。
dateISO()	Boolean	驗證 ISO 類型的日期格式。
dateDE()	Boolean	驗證德式的日期格式（29.04.1994 或 1.1.2006）。
number()	Boolean	驗證十進制數字（包括小數的）。
digits()	Boolean	驗證整數。
creditcard()	Boolean	驗證信用卡號。
accept(extension)	Boolean	驗證相同後綴名的字符串。
equalTo(other)	Boolean	驗證兩個輸入框的內容是否相同。
phoneUS()	Boolean	驗證美式的電話號碼。
*
* */

如果要直接使用的話，引入common.js和form-verify.js即可，common.js在上面

下面是一個提示信息及定位的方法：需要藉助layer,需要的可以看下

/**
 * 提示信息及定位方法,驗證框架這個是沒用的，如果你自己寫驗證，不用這個插件，那麼錯誤提示定位可以用這個，必須引入layer
 * @param msg 顯示的提示信息
 * @param idName 要定位的元素id
 * @param time 提示層顯示時間
 * @param slideTime 滑動到錯誤地點時間
 */
function tips(msg, idName, time, slideTime) {
    layer.tips(msg, '#' + idName, {
        tips: [1, '#3595CC'],
        time: time
    });
    $("html,body").animate({scrollTop: $("#" + idName).offset().top}, slideTime);
}

效果：

利用jQuery.validator來做表單驗證，不要太輕鬆（全攻略）

對switch進行拆分重構，降低複雜度，5種方式

webpack4.x打包圖片文件遇到效果不顯示的問題（file-loader加載遇到的狗血問題）

feign調用文件上傳服務

Feign微服務調用文件上傳微服務

linux下安裝redis與配置

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結