jQuery Validate 表單驗證

原創 ATwill... 2020-02-23 15:33

jQuery Validate

jQuery Validate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作爲錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。目前版本是 1.13.1。

訪問 jQuery Validate 官網，下載最新版的 jQuery Validate 插件。

導入 js 庫

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

默認校驗規則

序號 規則 描述
1 required:true 必須輸入的字段。
2 remote:"check.php" 使用 ajax 方法調用 check.php 驗證輸入值。
3 email:true 必須輸入正確格式的電子郵件。
4 url:true 必須輸入正確格式的網址。
5 date:true 必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6 dateISO:true 必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7 number:true 必須輸入合法的數字（負數，小數）。
8 digits:true 必須輸入整數。
9 creditcard: 必須輸入合法的信用卡號。
10 equalTo:"#field" 輸入值必須和 #field 相同。
11 accept: 輸入擁有合法後綴名的字符串（上傳文件的後綴）。
12 maxlength:5 輸入長度最多是 5 的字符串（漢字算一個字符）。
13 minlength:10 輸入長度最小是 10 的字符串（漢字算一個字符）。
14 rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。
15 range:[5,10] 輸入值必須介於 5 和 10 之間。
16 max:5 輸入值不能大於 5。
17 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).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    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}.")
},

如需要修改，可在 js 代碼中加入：

jQuery.extend(jQuery.validator.messages, {
    required: "必選字段",
	remote: "請修正該字段",
	email: "請輸入正確格式的電子郵件",
	url: "請輸入合法的網址",
	date: "請輸入合法的日期",
	dateISO: "請輸入合法的日期 (ISO).",
	number: "請輸入合法的數字",
	digits: "只能輸入整數",
	creditcard: "請輸入合法的信用卡號",
	equalTo: "請再次輸入相同的值",
	accept: "請輸入擁有合法後綴名的字符串",
	maxlength: jQuery.validator.format("請輸入一個 長度最多是 {0} 的字符串"),
	minlength: jQuery.validator.format("請輸入一個 長度最少是 {0} 的字符串"),
	rangelength: jQuery.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字符串"),
	range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
	max: jQuery.validator.format("請輸入一個最大爲{0} 的值"),
	min: jQuery.validator.format("請輸入一個最小爲{0} 的值")
});

推薦做法，將此文件放入 messages_cn.js 中，在頁面中引入：

<script src="../js/messages_cn.js" type="text/javascript"></script>

使用方式

1、將校驗規則寫到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">確認密碼</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

使用 class="{}" 的方式，必須引入包：jquery.metadata.js。

可以使用如下的方法，修改提示內容：

class="{required:true,minlength:5,messages:{required:'請輸入內容'}}"

在使用 equalTo 關鍵字時，後面的內容必須加上引號，代碼如下所示：

class="{required:true,minlength:5,equalTo:'#password'}"

2、將校驗規則寫到 js 代碼中

$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "請輸入姓名",
   email: {
    required: "請輸入Email地址",
    email: "請輸入正確的email地址"
   },
   password: {
    required: "請輸入密碼",
    minlength: jQuery.format("密碼不能小於{0}個字 符")
   },
   confirm_password: {
    required: "請輸入確認密碼",
    minlength: "確認密碼不能小於5個字符",
    equalTo: "兩次輸入密碼不一致不一致"
   }
  }
    });
});

messages 處，如果某個控件沒有 message，將調用默認的信息

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">確認密碼</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 必須有值。
required:"#aa:checked" 表達式的值爲真，則需要驗證。
required:function(){} 返回爲真，表示需要驗證。

後邊兩種常用於，表單中需要同時填或不填的元素。

常用方法及注意問題

1、用其他方式替代默認的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

使用 ajax 方式

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

可以設置 validate 的默認值，寫法如下：

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

如果想提交表單, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只驗證不提交表單

如果這個參數爲true，那麼表單不會提交，只進行檢查，調試時十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

如果一個頁面中有多個表單都想設置成爲 debug，則使用：

$.validator.setDefaults({
   debug: true
})

3、ignore：忽略某些元素不驗證

ignore: ".ignore"

4、更改錯誤信息顯示的位置

errorPlacement：Callback

指明錯誤放置的位置，默認情況是：error.appendTo(element.parent());即把錯誤信息放在驗證的元素後面。

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

實例

<tr>
    <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
</tr>
<tr>
    <td style="padding-right: 5px;">
        <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
        <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
    </td>
    <td style="padding-left: 5px;">
        <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
        <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
    </td>
    <td></td>
</tr>
<tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
        <div id="termswrap">
            <input id="terms" type="checkbox" name="terms" />
            <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
        </div>
    </td>
</tr>

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

代碼的作用是：一般情況下把錯誤信息顯示在 <td class="status"></td> 中，如果是 radio 則顯示在 <td></td> 中，如果是 checkbox 則顯示在內容的後面。

參數 類型 描述 默認值
errorClass String 指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 "error"
errorElement String 用什麼標籤標記錯誤，默認是 label，可以改成 em。 "label"
errorContainer Selector 顯示或者隱藏驗證信息，可以自動實現有錯誤信息出現時把容器屬性變爲顯示，無錯誤時隱藏，用處不大。
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector 把錯誤信息統一放在一個容器裏面。
wrapper String 用什麼標籤再把上邊的 errorELement 包起來。

一般這三個屬性同時使用，實現在一個容器內顯示所有錯誤提示的功能，並且沒有信息時自動隱藏。

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5、更改錯誤信息顯示的樣式

設置錯誤提示的樣式，可以增加圖標顯示，在該系統中已經建立了一個 validation.css，專門用於維護校驗文件的樣式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6、每個字段驗證通過執行函數

success：String,Callback

要驗證的元素通過驗證後的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。

success: function(label) {
    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");
    //label.addClass("valid").text("Ok!")
}

添加 "valid" 到驗證元素，在 CSS 中定義的樣式 <style>label.valid {}</style>。

success: "valid"

7、驗證的觸發方式修改

下面的雖然是 boolean 型的，但建議除非要改爲 false，否則別亂添加。

觸發方式 類型 描述 默認值
onsubmit Boolean 提交時驗證。設置爲 false 就用其他方法去驗證。 true
onfocusout Boolean 失去焦點時驗證（不包括複選框/單選按鈕）。 true
onkeyup Boolean 在 keyup 時驗證。 true
onclick Boolean 在點擊複選框和單選按鈕時驗證。 true
focusInvalid Boolean 提交表單後，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 true
focusCleanup Boolean 如果是 true 那麼當未通過驗證的元素獲得焦點時，移除錯誤提示。避免和 focusInvalid 一起用。 false 
// 重置表單
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

8、異步驗證

remote：URL

使用 ajax 方式進行驗證，默認會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用 data 選項。

remote: "check-email.php"
remote: {
    url: "check-email.php",     //後臺處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據
        username: function() {
            return $("#username").val();
        }
    }
}

遠程地址只能輸出 "true" 或 "false"，不能有其他輸出。

9、添加自定義校驗

addMethod：name, method, message

自定義驗證方法

// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一箇中文字算2個字節)"));

// 郵政編碼驗證   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建議一般寫在 additional-methods.js 文件中。

注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、數字和下劃線"。調用前要添加對 additional-methods.js 文件的引用。

10、radio 和 checkbox、select 的驗證

radio 的 required 表示必須選中一個。

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必須選中。

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必須選中的最小個數，maxlength 表示最大的選中個數，rangelength:[2,3] 表示選中個數區間。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示選中的 value 不能爲空。

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>

select 的 minlength 表示選中的最小個數（可多選的 select），maxlength 表示最大的選中個數，rangelength:[2,3] 表示選中個數區間。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>

jQuery.validate 中文 API

名稱 返回類型 描述
validate(options) Validator 驗證所選的 FORM。
valid() Boolean 檢查是否驗證通過。
rules() Options 返回元素的驗證規則。
rules("add",rules) Options 增加驗證規則。
rules("remove",rules) Options 刪除驗證規則。
removeAttrs(attributes) Options 刪除特殊屬性並且返回它們。
自定義選擇器
:blank Validator 沒有值的篩選器。
:filled Array <Element> 有值的篩選器。
:unchecked Array <Element> 沒選擇的元素的篩選器。
實用工具
jQuery.format(template,argument,argumentN...) String 用參數代替模板中的 {n}。

Validator

validate 方法返回一個 Validator 對象。Validator 對象有很多方法可以用來引發校驗程序或者改變 form 的內容，下面列出幾個常用的方法。

名稱 返回類型 描述
form() Boolean 驗證 form 返回成功還是失敗。
element(element) Boolean 驗證單個元素是成功還是失敗。
resetForm() undefined 把前面驗證的 FORM 恢復到驗證前原來的狀態。
showErrors(errors) undefined 顯示特定的錯誤信息。
Validator 函數
setDefaults(defaults) undefined 改變默認的設置。
addMethod(name,method,message) undefined 添加一個新的驗證方法。必須包括一個獨一無二的名字，一個 JAVASCRIPT 的方法和一個默認的信息。
addClassRules(name,rules) undefined 增加組合驗證類型，在一個類裏面用多種驗證方法時比較有用。
addClassRules(rules) undefined 增加組合驗證類型，在一個類裏面用多種驗證方法時比較有用。這個是同時加多個驗證方法。

內置驗證方式

名稱 返回類型 描述
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 驗證美式的電話號碼。

validate ()的可選項

描述 代碼
debug：進行調試模式（表單不提交）。 
$(".selector").validate
({
	debug:true
})
把調試設置爲默認。 
$.validator.setDefaults({
	debug:true
})
submitHandler：通過驗證後運行的函數，裏面要加上表單提交的函數，否則表單不會提交。 
$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})
ignore：對某些元素不進行驗證。 
$("#myform").validate({
	ignore:".ignore"
})
rules：自定義規則，key:value 的形式，key 是要驗證的元素，value 可以是字符串或對象。 
$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})
messages：自定義的提示信息，key:value 的形式，key 是要驗證的元素，value 可以是字符串或函數。 
$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能爲空",
		email:{       
			required:"E-mail不能爲空",
			email:"E-mail地址不正確"
		}
	}
})
groups：對一組元素的驗證，用一個錯誤提示，用 errorPlacement 控制把出錯信息放在哪裏。 
$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})
OnSubmit：類型 Boolean，默認 true，指定是否提交時驗證。 
$(".selector").validate({  
	onsubmit:false
})
onfocusout：類型 Boolean，默認 true，指定是否在獲取焦點時驗證。 
$(".selector").validate({   
	onfocusout:false
})
onkeyup：類型 Boolean，默認 true，指定是否在敲擊鍵盤時驗證。 
$(".selector").validate({
   onkeyup:false
})
onclick：類型 Boolean，默認 true，指定是否在鼠標點擊時驗證（一般驗證 checkbox、radiobox）。 
$(".selector").validate({
   onclick:false
})
focusInvalid：類型 Boolean，默認 true。提交表單後，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 
$(".selector").validate({
   focusInvalid:false
})
focusCleanup：類型 Boolean，默認 false。當未通過驗證的元素獲得焦點時，移除錯誤提示（避免和 focusInvalid 一起使用）。 
$(".selector").validate({
   focusCleanup:true
})
errorClass：類型 String，默認 "error"。指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 
$(".selector").validate({ 
	errorClass:"invalid"
})
errorElement：類型 String，默認 "label"。指定使用什麼標籤標記錯誤。 
$(".selector").validate
   errorElement:"em"
})
wrapper：類型 String，指定使用什麼標籤再把上邊的 errorELement 包起來。 
$(".selector").validate({
   wrapper:"li"
})
errorLabelContainer：類型 Selector，把錯誤信息統一放在一個容器裏面。 
$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})
showErrors：跟一個函數，可以顯示總共有多少個未通過驗證的元素。 
$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})
errorPlacement：跟一個函數，可以自定義錯誤放到哪裏。 
$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
success：要驗證的元素通過驗證後的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。 
$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})
highlight：可以給未通過驗證的元素加效果、閃爍等。

addMethod(name,method,message)方法

參數 name 是添加的方法的名字。

參數 method 是一個函數，接收三個參數 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是參數。

我們可以用 addMethod 來添加除內置的 Validation 方法之外的驗證方法。比如有一個字段，只能輸一個字母，範圍是 a-f，寫法如下：

$.validator.addMethod("af",function(value,element,params){  
	if(value.length>1){
		return false;
	}
    if(value>=params[0] && value<=params[1]){
		return true;
	}else{
		return false;
	}
},"必須是一個字母,且a-f");

如果有個表單字段的 id="username"，則在 rules 中寫：

username:{
   af:["a","f"]
}

addMethod 的第一個參數，是添加的驗證方法的名字，這時是 af。
addMethod 的第三個參數，是自定義的錯誤提示，這裏的提示爲:"必須是一個字母,且a-f"。
addMethod 的第二個參數，是一個函數，這個比較重要，決定了用這個驗證方法時的寫法。

如果只有一個參數，直接寫，比如 af:"a"，那麼 a 就是這個唯一的參數，如果多個參數，則寫在 [] 裏，用逗號分開。

meta String 方式

$("#myform").validate({

   meta:"validate",

   submitHandler:function() { 
alert("Submitted!") }

})
<script type="text/javascript" 
src="js/jquery.metadata.js"></script>

<script type="text/javascript" 
src="js/jquery.validate.js"></script>

<form id="myform">

  <input type="text" 
name="email" class="{validate:{ required:true,email:true }}" />

  <input type="submit" 
value="Submit" />

</form>

實例演示

虛構的實例

現實世界的實例

jQuery Validate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作爲錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。目前版本是 1.13.1。

訪問 jQuery Validate 官網，下載最新版的 jQuery Validate 插件。

導入 js 庫

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

默認校驗規則

序號 規則 描述
1 required:true 必須輸入的字段。
2 remote:"check.php" 使用 ajax 方法調用 check.php 驗證輸入值。
3 email:true 必須輸入正確格式的電子郵件。
4 url:true 必須輸入正確格式的網址。
5 date:true 必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6 dateISO:true 必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7 number:true 必須輸入合法的數字（負數，小數）。
8 digits:true 必須輸入整數。
9 creditcard: 必須輸入合法的信用卡號。
10 equalTo:"#field" 輸入值必須和 #field 相同。
11 accept: 輸入擁有合法後綴名的字符串（上傳文件的後綴）。
12 maxlength:5 輸入長度最多是 5 的字符串（漢字算一個字符）。
13 minlength:10 輸入長度最小是 10 的字符串（漢字算一個字符）。
14 rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。
15 range:[5,10] 輸入值必須介於 5 和 10 之間。
16 max:5 輸入值不能大於 5。
17 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).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    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}.")
},

如需要修改，可在 js 代碼中加入：

jQuery.extend(jQuery.validator.messages, {
    required: "必選字段",
	remote: "請修正該字段",
	email: "請輸入正確格式的電子郵件",
	url: "請輸入合法的網址",
	date: "請輸入合法的日期",
	dateISO: "請輸入合法的日期 (ISO).",
	number: "請輸入合法的數字",
	digits: "只能輸入整數",
	creditcard: "請輸入合法的信用卡號",
	equalTo: "請再次輸入相同的值",
	accept: "請輸入擁有合法後綴名的字符串",
	maxlength: jQuery.validator.format("請輸入一個 長度最多是 {0} 的字符串"),
	minlength: jQuery.validator.format("請輸入一個 長度最少是 {0} 的字符串"),
	rangelength: jQuery.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字符串"),
	range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
	max: jQuery.validator.format("請輸入一個最大爲{0} 的值"),
	min: jQuery.validator.format("請輸入一個最小爲{0} 的值")
});

推薦做法，將此文件放入 messages_cn.js 中，在頁面中引入：

<script src="../js/messages_cn.js" type="text/javascript"></script>

使用方式

1、將校驗規則寫到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">確認密碼</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

使用 class="{}" 的方式，必須引入包：jquery.metadata.js。

可以使用如下的方法，修改提示內容：

class="{required:true,minlength:5,messages:{required:'請輸入內容'}}"

在使用 equalTo 關鍵字時，後面的內容必須加上引號，代碼如下所示：

class="{required:true,minlength:5,equalTo:'#password'}"

2、將校驗規則寫到 js 代碼中

$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "請輸入姓名",
   email: {
    required: "請輸入Email地址",
    email: "請輸入正確的email地址"
   },
   password: {
    required: "請輸入密碼",
    minlength: jQuery.format("密碼不能小於{0}個字 符")
   },
   confirm_password: {
    required: "請輸入確認密碼",
    minlength: "確認密碼不能小於5個字符",
    equalTo: "兩次輸入密碼不一致不一致"
   }
  }
    });
});

messages 處，如果某個控件沒有 message，將調用默認的信息

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">確認密碼</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 必須有值。
required:"#aa:checked" 表達式的值爲真，則需要驗證。
required:function(){} 返回爲真，表示需要驗證。

後邊兩種常用於，表單中需要同時填或不填的元素。

常用方法及注意問題

1、用其他方式替代默認的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

使用 ajax 方式

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

可以設置 validate 的默認值，寫法如下：

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

如果想提交表單, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只驗證不提交表單

如果這個參數爲true，那麼表單不會提交，只進行檢查，調試時十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

如果一個頁面中有多個表單都想設置成爲 debug，則使用：

$.validator.setDefaults({
   debug: true
})

3、ignore：忽略某些元素不驗證

ignore: ".ignore"

4、更改錯誤信息顯示的位置

errorPlacement：Callback

指明錯誤放置的位置，默認情況是：error.appendTo(element.parent());即把錯誤信息放在驗證的元素後面。

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

實例

<tr>
    <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
</tr>
<tr>
    <td style="padding-right: 5px;">
        <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
        <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
    </td>
    <td style="padding-left: 5px;">
        <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
        <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
    </td>
    <td></td>
</tr>
<tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
        <div id="termswrap">
            <input id="terms" type="checkbox" name="terms" />
            <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
        </div>
    </td>
</tr>

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

代碼的作用是：一般情況下把錯誤信息顯示在 <td class="status"></td> 中，如果是 radio 則顯示在 <td></td> 中，如果是 checkbox 則顯示在內容的後面。

參數 類型 描述 默認值
errorClass String 指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 "error"
errorElement String 用什麼標籤標記錯誤，默認是 label，可以改成 em。 "label"
errorContainer Selector 顯示或者隱藏驗證信息，可以自動實現有錯誤信息出現時把容器屬性變爲顯示，無錯誤時隱藏，用處不大。
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector 把錯誤信息統一放在一個容器裏面。
wrapper String 用什麼標籤再把上邊的 errorELement 包起來。

一般這三個屬性同時使用，實現在一個容器內顯示所有錯誤提示的功能，並且沒有信息時自動隱藏。

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5、更改錯誤信息顯示的樣式

設置錯誤提示的樣式，可以增加圖標顯示，在該系統中已經建立了一個 validation.css，專門用於維護校驗文件的樣式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6、每個字段驗證通過執行函數

success：String,Callback

要驗證的元素通過驗證後的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。

success: function(label) {
    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");
    //label.addClass("valid").text("Ok!")
}

添加 "valid" 到驗證元素，在 CSS 中定義的樣式 <style>label.valid {}</style>。

success: "valid"

7、驗證的觸發方式修改

下面的雖然是 boolean 型的，但建議除非要改爲 false，否則別亂添加。

觸發方式 類型 描述 默認值
onsubmit Boolean 提交時驗證。設置爲 false 就用其他方法去驗證。 true
onfocusout Boolean 失去焦點時驗證（不包括複選框/單選按鈕）。 true
onkeyup Boolean 在 keyup 時驗證。 true
onclick Boolean 在點擊複選框和單選按鈕時驗證。 true
focusInvalid Boolean 提交表單後，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 true
focusCleanup Boolean 如果是 true 那麼當未通過驗證的元素獲得焦點時，移除錯誤提示。避免和 focusInvalid 一起用。 false 
// 重置表單
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

8、異步驗證

remote：URL

使用 ajax 方式進行驗證，默認會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用 data 選項。

remote: "check-email.php"
remote: {
    url: "check-email.php",     //後臺處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據
        username: function() {
            return $("#username").val();
        }
    }
}

遠程地址只能輸出 "true" 或 "false"，不能有其他輸出。

9、添加自定義校驗

addMethod：name, method, message

自定義驗證方法

// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一箇中文字算2個字節)"));

// 郵政編碼驗證   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建議一般寫在 additional-methods.js 文件中。

注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、數字和下劃線"。調用前要添加對 additional-methods.js 文件的引用。

10、radio 和 checkbox、select 的驗證

radio 的 required 表示必須選中一個。

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必須選中。

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必須選中的最小個數，maxlength 表示最大的選中個數，rangelength:[2,3] 表示選中個數區間。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示選中的 value 不能爲空。

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>

select 的 minlength 表示選中的最小個數（可多選的 select），maxlength 表示最大的選中個數，rangelength:[2,3] 表示選中個數區間。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>

jQuery.validate 中文 API

名稱 返回類型 描述
validate(options) Validator 驗證所選的 FORM。
valid() Boolean 檢查是否驗證通過。
rules() Options 返回元素的驗證規則。
rules("add",rules) Options 增加驗證規則。
rules("remove",rules) Options 刪除驗證規則。
removeAttrs(attributes) Options 刪除特殊屬性並且返回它們。
自定義選擇器
:blank Validator 沒有值的篩選器。
:filled Array <Element> 有值的篩選器。
:unchecked Array <Element> 沒選擇的元素的篩選器。
實用工具
jQuery.format(template,argument,argumentN...) String 用參數代替模板中的 {n}。

Validator

validate 方法返回一個 Validator 對象。Validator 對象有很多方法可以用來引發校驗程序或者改變 form 的內容，下面列出幾個常用的方法。

名稱 返回類型 描述
form() Boolean 驗證 form 返回成功還是失敗。
element(element) Boolean 驗證單個元素是成功還是失敗。
resetForm() undefined 把前面驗證的 FORM 恢復到驗證前原來的狀態。
showErrors(errors) undefined 顯示特定的錯誤信息。
Validator 函數
setDefaults(defaults) undefined 改變默認的設置。
addMethod(name,method,message) undefined 添加一個新的驗證方法。必須包括一個獨一無二的名字，一個 JAVASCRIPT 的方法和一個默認的信息。
addClassRules(name,rules) undefined 增加組合驗證類型，在一個類裏面用多種驗證方法時比較有用。
addClassRules(rules) undefined 增加組合驗證類型，在一個類裏面用多種驗證方法時比較有用。這個是同時加多個驗證方法。

內置驗證方式

名稱 返回類型 描述
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 驗證美式的電話號碼。

validate ()的可選項

描述 代碼
debug：進行調試模式（表單不提交）。 
$(".selector").validate
({
	debug:true
})
把調試設置爲默認。 
$.validator.setDefaults({
	debug:true
})
submitHandler：通過驗證後運行的函數，裏面要加上表單提交的函數，否則表單不會提交。 
$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})
ignore：對某些元素不進行驗證。 
$("#myform").validate({
	ignore:".ignore"
})
rules：自定義規則，key:value 的形式，key 是要驗證的元素，value 可以是字符串或對象。 
$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})
messages：自定義的提示信息，key:value 的形式，key 是要驗證的元素，value 可以是字符串或函數。 
$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能爲空",
		email:{       
			required:"E-mail不能爲空",
			email:"E-mail地址不正確"
		}
	}
})
groups：對一組元素的驗證，用一個錯誤提示，用 errorPlacement 控制把出錯信息放在哪裏。 
$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})
OnSubmit：類型 Boolean，默認 true，指定是否提交時驗證。 
$(".selector").validate({  
	onsubmit:false
})
onfocusout：類型 Boolean，默認 true，指定是否在獲取焦點時驗證。 
$(".selector").validate({   
	onfocusout:false
})
onkeyup：類型 Boolean，默認 true，指定是否在敲擊鍵盤時驗證。 
$(".selector").validate({
   onkeyup:false
})
onclick：類型 Boolean，默認 true，指定是否在鼠標點擊時驗證（一般驗證 checkbox、radiobox）。 
$(".selector").validate({
   onclick:false
})
focusInvalid：類型 Boolean，默認 true。提交表單後，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 
$(".selector").validate({
   focusInvalid:false
})
focusCleanup：類型 Boolean，默認 false。當未通過驗證的元素獲得焦點時，移除錯誤提示（避免和 focusInvalid 一起使用）。 
$(".selector").validate({
   focusCleanup:true
})
errorClass：類型 String，默認 "error"。指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 
$(".selector").validate({ 
	errorClass:"invalid"
})
errorElement：類型 String，默認 "label"。指定使用什麼標籤標記錯誤。 
$(".selector").validate
   errorElement:"em"
})
wrapper：類型 String，指定使用什麼標籤再把上邊的 errorELement 包起來。 
$(".selector").validate({
   wrapper:"li"
})
errorLabelContainer：類型 Selector，把錯誤信息統一放在一個容器裏面。 
$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})
showErrors：跟一個函數，可以顯示總共有多少個未通過驗證的元素。 
$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})
errorPlacement：跟一個函數，可以自定義錯誤放到哪裏。 
$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
success：要驗證的元素通過驗證後的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。 
$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})
highlight：可以給未通過驗證的元素加效果、閃爍等。

addMethod(name,method,message)方法

參數 name 是添加的方法的名字。

參數 method 是一個函數，接收三個參數 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是參數。

我們可以用 addMethod 來添加除內置的 Validation 方法之外的驗證方法。比如有一個字段，只能輸一個字母，範圍是 a-f，寫法如下：

$.validator.addMethod("af",function(value,element,params){  
	if(value.length>1){
		return false;
	}
    if(value>=params[0] && value<=params[1]){
		return true;
	}else{
		return false;
	}
},"必須是一個字母,且a-f");

如果有個表單字段的 id="username"，則在 rules 中寫：

username:{
   af:["a","f"]
}

addMethod 的第一個參數，是添加的驗證方法的名字，這時是 af。
addMethod 的第三個參數，是自定義的錯誤提示，這裏的提示爲:"必須是一個字母,且a-f"。
addMethod 的第二個參數，是一個函數，這個比較重要，決定了用這個驗證方法時的寫法。

如果只有一個參數，直接寫，比如 af:"a"，那麼 a 就是這個唯一的參數，如果多個參數，則寫在 [] 裏，用逗號分開。

meta String 方式

$("#myform").validate({

   meta:"validate",

   submitHandler:function() { 
alert("Submitted!") }

})
<script type="text/javascript" 
src="js/jquery.metadata.js"></script>

<script type="text/javascript" 
src="js/jquery.validate.js"></script>

<form id="myform">

  <input type="text" 
name="email" class="{validate:{ required:true,email:true }}" />

  <input type="submit" 
value="Submit" />

</form>

實例演示

虛構的實例

現實世界的實例

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師

錯誤一轉件所謂“應該能行”的代碼 錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。 影響：不經過適當錯誤檢查的網站就是對最終用戶耍

原創 2023-10-10 11:11:44

界面控件DevExtreme v23.2亮點 - 標籤、表單、編輯器功能升級

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-28 12:19:08

H5按需加載探索——Webpack模塊化示例

1-前言 瀏覽器早已已經全面支持ESM即ES模塊化，可以實現前端代碼的模塊化，以及按需加載/下載，甚至還提供了一個非常貼心的ES特性：importmap 通過importmap，可以代碼零修改實現按需加載： 1.1 在html中聲明模塊的

原創 2024-05-22 11:10:06

界面控件DevExtreme v23.1、v23.2盤點 - 增強的TypeScript(Angular、React、Vue)

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-07 11:34:56

Web前端開發常用到的和升職加薪的技能點分別是哪些？

隨着互聯網的高速發展以及技術的不斷革新，Web前端工程師需要掌握的技術也有所變更。很多人想知道當前常用的Web前端技術有哪些?如何快速掌握這些技術?接 常用的Web前端技術有哪些? Web前端是爲了協調前端設計與後端開發之間工作的崗位，是

原創 2023-10-10 09:55:05

現在入行web前端開發晚了？數據代表一切

前端程序員是大家都公認的高薪崗位，那他們的工資到底有沒有傳說中那麼高呢？我們來看看職友集的數據。 數據來源：職友集 就北上廣深杭的前端薪資來看，平均薪資均達到一萬以上。 通常來講： 工作1~2年後會成爲前端高級軟件工程師，年薪可以

原創 2023-10-10 09:54:58

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯 報錯原因是沒有layui自帶的jquery中沒有對應這個方法。 二種解決辦法：

原創 2023-02-08 23:50:08

個人Scrum敏捷開發轉型中的技術實踐

Scrum無處不在，說起Scrum敏捷開發框架，也許大家並不陌生，表面理解它其實並不複雜，但是真正用得好的公司並不多，我自己曾經的工作環境也依然沒有體驗過敏捷開發非常成熟的實踐過程，但是我依然推薦這種開發方式，不論是對於企業發展還是生活中

原創 2022-04-30 12:48:30

springboot集成socketio實現一對一實時聊天

看到別人的系統或者app都有聊天功能，大家有沒有想過自己的系統也集成進去呢？現在來揭曉！ 第一步：pom.xml添加socketio依賴 <dependency> <groupId>com.corundumstudio.so

原創 2022-04-30 11:11:09

js組合圖片（在圖上畫二維碼）

總的有兩個依賴， jquery和jquery.qrcode 。實現原理其實就是圖層的堆疊。做二維碼推廣的時候要用到此方法 <body> <div class="" id="qrcode" style="display: none;

原創 2022-04-30 10:42:12

Iframe不同層級方法調用和元素獲取

jquery 獲取元素 父取子 $("#iframeId").contents().find("#elementId") 子取父 $("#elementId",window.parent.document) 方法、變量調用 父調

原創 2022-04-30 06:30:08

六年來技術變遷的心得體會

1 技術發展的一些體會 從2016年開始, 筆者走上了"程序猿"這條路, 至今已經有6年了. 這6年來, 從項目開發所使用的前後端技術不斷變遷, 我深切體會到這一行技術發展的日新月異, 何其迅速. 本文不談具體的技術細節, 只談一談入行這6

原創 2022-04-30 06:03:09

在沒有jQuery的情況下查找最近的元素 - Finding closest element without jQuery

問題： I am trying to find the closest element with a specific tag name without jquery.我試圖在沒有 jquery 的情況下找到具有特定標籤名稱的最近元素。

fyin1314 2021-12-29 09:18:03

How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller?

問題： My current code looks like the following. 我當前的代碼如下所示。 How can I pass my array to the controller and what kind of p

javail 2021-12-29 09:15:00

如何從 JavaScript 讀取腳本標籤中的 JSON？ - How can I read a JSON in the script-tag from JavaScript?

問題： I have a dynamically generated page where I want to use a static JavaScript and pass it a JSON string as a paramete

javail 2021-12-29 09:15:00