jQuery Validate密碼驗證的使用

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

?

1. 下載和引入validate.js

注意Validate的導入要在jQuery庫之后。代碼如下：

先導入jQuery庫，然后導入Validate插件，如果是中文提示還需要導入messages_zh.js。

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

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

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

Html

<form id="loginForm" οnsubmit="return false">

????<div>

????????<label for="username">用戶名</label>

????????<input type="text" id="user" name="username" placeholder="請輸入用戶名">

????</div>

????<div>

????????<label for="password">密碼</label>

????????<input type="password" id="pwd" name="password" placeholder="請輸入密碼">

????</div>

????<div >

????????<label for="verify">驗證碼</label>

????????<div>

????????????<input type="text" id="verify" name="verify" placeholder="請輸入驗證碼">

????????</div>

????</div>

????<button id="login" type="submit" class="btn btn-primary">

????????登錄

????</button>

</form>

Js

?$(document).ready(function () {

var icon = "<i class='fa fa-times-circle'></i> ";

?// 項目一開始就要初始化驗證

????$("#loginForm").validate({

????????errorElement: 'span',

????????errorClass: 'error-block',

????????onfocusout: function(element) { $(element).valid(); },

????????rules: {

????????????username: {

????????????????required: true

????????????},

????????????password: {

????????????????required: true,

????????????????passWord:true ???// 和自定義驗證相同

????????????},

????????????verify: {

????????????????required: true

????????????}

????????},

????????messages: {

????????????username: {

????????????????required: icon + "請輸入您的用戶名",

????????????},

????????????password: {

????????????????required: icon + "請輸入您的密碼",

????????????????passWord:icon + "請輸入至少10位密碼（至少包含1個字母，1個數字和1個特殊字符）",

????????????},

????????????verify: {

????????????????required: icon + "請輸入您的密碼",

????????????}

????????},

????????submitHandler:function () {

????????????login() ??//驗證成功的提交事件

????????}

????})

?

// 自定義密碼驗證

????jQuery.validator.addMethod("passWord", function(value, element) {

????????var passWord = /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*((?=[\x21-\x7e]+)[^A-Za-z0-9])).{10,}$/;

????????return this.optional(element) || (passWord.test(value));

????}, "請輸入至少10位密碼（至少包含1個字母，1個數字和1個特殊字符）");

})

提示 form表格驗證會提交，form要添加 οnsubmit=“return false” ,登錄提交按鈕改為 type="submit "

jQuery Validate密碼驗證 API

內置驗證方式：

validate ()的可選項：

?**showErrors:**

$(".selector").validate({

???showErrors:function(errorMap,errorList) {

????????$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");

????????this.defaultShowErrors();

???}

})

**errorPlacement:**

跟一個函數,可以自定義錯誤放到哪里

$("#myform").validate({

??rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));

???},

???debug:true

})

?

**success:**

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

$("#myform").validate({

????????success:"valid",

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

})

?

**highlight:**

可以給未通過驗證的元素加效果,閃爍等

默認的提示

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}.")

},

Query Validate提供了中文信息提示包，位于下載包的 dist/localization/messages_zh.js，只需將包引入到頁面即可。

當然也可以自己設置messages來設置提示（例如開頭的例子）。

?

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

?

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

也可以通過設置errorClass，errorElement給提示設置不同的報錯信息

?

復制代碼

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;

}

?

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

success：String,Callback

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

success: function(label) {

????// set ? as text for IE

????label.html("?").addClass("checked");

????//label.addClass("valid").text("Ok!")

}

6、驗證的觸發方式修改

?

onsubmit：Boolean Default: true

提交時驗證. 設置唯false就用其他方法去驗證

onfocusout：Boolean Default: true

失去焦點是驗證(不包括checkboxes/radio buttons)

onkeyup：Boolean Default: true

在keyup時驗證.

onclick：Boolean Default: true

在checkboxes 和 radio 點擊時驗證

focusInvalid：Boolean Default: true

提交表單后，未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點

focusCleanup：Boolean Default: false

如果是true那么當未通過驗證的元素獲得焦點時，移除錯誤提示。避免和focusInvalid一起用

?

7、異步驗證

?

remote：URL

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

?

復制代碼

示例一：

remote: "check-email.jsp"

示例二：

remote: {

????url: "check-email.jsp", ????//后臺處理程序

????type: "post", ??????????????//數據發送方式

????dataType: "json", ??????????//接受數據格式 ??

????data: { ????????????????????//要傳遞的數據

????????username: function() {

????????????return $("#username").val();

????????}

????}

}

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

8、添加自定義校驗

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));

}, "請正確填寫您的郵政編碼");

// 手機號碼驗證

jQuery.validator.addMethod("mobile", function(value, element) {

????var length = value.length;

????var mobile = ?/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/

????return this.optional(element) || (length == 11 && mobile.test(value));

}, "手機號碼格式錯誤"); ?

?

// 電話號碼驗證 ??

jQuery.validator.addMethod("phone", function(value, element) {

????var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;

????return this.optional(element) || (tel.test(value));

}, "電話號碼格式錯誤");

?

// 郵政編碼驗證 ??

jQuery.validator.addMethod("zipCode", function(value, element) {

????var tel = /^[0-9]{6}$/;

????return this.optional(element) || (tel.test(value));

}, "郵政編碼格式錯誤");

?

// QQ號碼驗證 ??

jQuery.validator.addMethod("qq", function(value, element) {

????var tel = /^[1-9]\d{4,9}$/;

????return this.optional(element) || (tel.test(value));

}, "qq號碼格式錯誤");

?

// IP地址驗證

jQuery.validator.addMethod("ip", function(value, element) {

????var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/; ????return this.optional(element) || (ip.test(value) && (RegExp./; ????return this.optional(element) || (ip.test(value) && (RegExp.1 < 256 && RegExp.2 < 256 && RegExp.2 < 256 && RegExp.3 < 256 && RegExp.$4 < 256));

}, "Ip地址格式錯誤");

?

// 字母和數字的驗證

jQuery.validator.addMethod("chrnum", function(value, element) {

????var chrnum = /^([a-zA-Z0-9]+)$/;

????return this.optional(element) || (chrnum.test(value));

}, "只能輸入數字和字母(字符A-Z, a-z, 0-9)");

?

// 中文的驗證

jQuery.validator.addMethod("chinese", function(value, element) {

????var chinese = /^[\u4e00-\u9fa5]+$/;

????return this.optional(element) || (chinese.test(value));

}, "只能輸入中文");

?

// 下拉框驗證

$.validator.addMethod("selectNone", function(value, element) {

????return value == "請選擇";

}, "必須選擇一項");

?

// 字節長度驗證

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {

function(){ //黃金代碼?http://www.kaifx.cn/mt4/kaifx/1805.html

????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個字節)"));

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

?

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

?

9、radio和checkbox、select的驗證

?

復制代碼

1.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" id="agree" name="agree" class="{required:true}" />

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

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

<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />

<input type="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>

10.可以設置validate的默認值

如果有兩個或者多個表格驗證，可以設置默認值

$.validator.setDefaults({

errorElement: ‘span’,

errorClass: ‘error-block’,

submitHandler: function(form) { alert(“submit!”); form.submit(); }

});

?