jquery.validate有什么相關參數

這篇文章主要為大家展示了“jquery.validate有什么相關參數”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery.validate有什么相關參數”這篇文章吧。

　　Jquery Validate 相關參數

　　//定義中文消息

　　var cnmsg = {

　　required: “必選字段”,

　　remote: “請修正該字段”,

　　email: “請輸入正確格式的電子郵件”,

　　url: “請輸入合法的網址”,

　　date: “請輸入合法的日期”,

　　dateISO: “請輸入合法的日期 (ISO).”,

　　number: “請輸入合法的數字”,

　　digits: “只能輸入整數”,

　　creditcard: “請輸入合法的信用卡號”,

　　equalTo: “請再次輸入相同的值”,

　　accept: “請輸入擁有合法后綴名的字符串”,

　　maxlength: jQuery.format(“請輸入一個長度最多是 {0} 的字符串”),

　　minlength: jQuery.format(“請輸入一個長度最少是 {0} 的字符串”),

　　rangelength: jQuery.format(“請輸入一個長度介于 {0} 和 {1} 之間的字符串”),

　　range: jQuery.format(“請輸入一個介于 {0} 和 {1} 之間的值”),

　　max: jQuery.format(“請輸入一個最大為 {0} 的值”),

　　min: jQuery.format(“請輸入一個最小為 {0} 的值”)

　　};

　　jQuery.extend(jQuery.validator.messages, cnmsg);

　　validate 自定義驗證

　　$(document).ready( function() {

　　/**

　　* 身份證號碼驗證

　　*

　　*/

　　function isIdCardNo(num) {

　　var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);

　　var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2");

　　var varArray = new Array();

　　var intValue;

　　var lngProduct = 0;

　　var intCheckDigit;

　　var intStrLen = num.length;

　　var idNumber = num;

　　// initialize

　　if ((intStrLen != 15) && (intStrLen != 18)) {

　　return false;

　　}

　　// check and set value

　　for(i=0;i

　　varArray[i] = idNumber.charAt(i);

　　if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {

　　return false;

　　} else if (i < 17) {

　　varArray[i] = varArray[i] * factorArr[i];

　　}

　　}

　　if (intStrLen == 18) {

　　//check date

　　var date8 = idNumber.substring(6,14);

　　if (isDate8(date8) == false) {

　　return false;

　　}

　　// calculate the sum of the products

　　for(i=0;i<17;i++) {

　　lngProduct = lngProduct + varArray[i];

　　}

　　// calculate the check digit

　　intCheckDigit = parityBit[lngProduct % 11];

　　// check last digit

　　if (varArray[17] != intCheckDigit) {

　　return false;

　　}

　　}

　　else{ //length is 15

　　//check date

　　var date6 = idNumber.substring(6,12);

　　if (isDate6(date6) == false) {

　　return false;

　　}

　　}

　　return true;

　　}

　　/**

　　* 判斷是否為“YYYYMM”式的時期

　　*

　　*/

　　function isDate6(sDate) {

　　if(!/^[0-9]{6}$/.test(sDate)) {

　　return false;

　　}

　　var year, month, day;

　　year = sDate.substring(0, 4);

　　month = sDate.substring(4, 6);

　　if (year < 1700 || year > 2500) return false

　　if (month < 1 || month > 12) return false

　　return true

　　}

　　/**

　　* 判斷是否為“YYYYMMDD”式的時期

　　*

　　*/

　　function isDate8(sDate) {

　　if(!/^[0-9]{8}$/.test(sDate)) {

　　return false;

　　}

　　var year, month, day;

　　year = sDate.substring(0, 4);

　　month = sDate.substring(4, 6);

　　day = sDate.substring(6, 8);

　　var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]

　　if (year < 1700 || year > 2500) return false

　　if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;

　　if (month < 1 || month > 12) return false

　　if (day < 1 || day > iaMonthDays[month - 1]) return false

　　return true

　　}

　　// 身份證號碼驗證

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

　　return this.optional(element) || isIdCardNo(value);

　　}, "請正確輸入身份證號碼");

　　//字母數字

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

　　return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);

　　}, "只能包括英文字母和數字");

　　// 郵政編碼驗證

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

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

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

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

　　// 漢字

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

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

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

　　}, "請輸入漢字");

　　// 字符最小長度驗證(一個中文字符長度為2)

　　jQuery.validator.addMethod("stringMinLength", 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);

　　}, $.validator.format("長度不能小于{0}!"));

　　// 字符最大長度驗證(一個中文字符長度為2)

　　jQuery.validator.addMethod("stringMaxLength", 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);

　　}, $.validator.format("長度不能大于{0}!"));

　　// 字符驗證

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

　　return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);

　　}, "不允許包含特殊符號!");

　　// 手機號碼驗證

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

　　var length = value.length;

　　return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));

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

　　// 電話號碼驗證

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

　　var tel = /^(\d{3,4}-?)?\d{7,9}$/g;

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

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

　　// 必須以特定字符串開頭驗證

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

　　var begin = new RegExp("^" + param);

　　return this.optional(element) || (begin.test(value));

　　}, $.validator.format("必須以 {0} 開頭!"));

　　// 驗證兩次輸入值是否不相同

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

　　return value != $(param).val();

　　}, $.validator.format("兩次輸入不能相同!"));

　　// 驗證值不允許與特定值等于

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

　　return value != param;

　　}, $.validator.format("輸入值不允許為{0}!"));

　　// 驗證值必須大于特定值(不能等于)

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

　　return value > param;

　　}, $.validator.format("輸入值必須大于{0}!"));

　　// 驗證值小數位數不能超過兩位

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

　　var decimal = /^-?\d+(\.\d{1,2})?$/;

　　return this.optional(element) || (decimal.test(value));

　　jQuery.validate 用法

　　validate(options) 返回:Validator 驗證所選的FORM。

　　valid() 返回:Boolean 檢查是否驗證通過。

　　rules() 返回:Options 返回元素的驗證規則。

　　rules(add,rules) 返回:Options 增加驗證規則。

　　rules(remove,rules)。

　　jquery.validate是一個基于jquery的非常優秀的驗證框架，我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持。

　　使用用法：

　　1、首先下載jquery.js和jquery.validate.js并引入js文件(注意：jquery必須在jquery.validate.js 之前被引入，否則會報錯)

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

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

　　2、編寫需要驗證的表單代碼及編寫驗證代碼(編寫驗證代碼有兩種方式，首先使用普通方式)

　　var validator = $("formId").validate({// #formId為需要進行驗證的表單ID

　　errorElement :"div",// 使用"div"標簽標記錯誤， 默認:"label"

　　wrapper:"li",// 使用"li"標簽再把上邊的errorELement包起來

　　errorClass :"validate-error",// 錯誤提示的css類名"error"

　　onsubmit:true,// 是否在提交是驗證,默認:true

　　onfocusout:true,// 是否在獲取焦點時驗證,默認:true

　　onkeyup :true,// 是否在敲擊鍵盤時驗證,默認:true

　　onclick:false,// 是否在鼠標點擊時驗證(一般驗證checkbox,radiobox)

　　focusCleanup:false,// 當未通過驗證的元素獲得焦點時,并移除錯誤提示

　　rules: {

　　loginName: {// 需要進行驗證的輸入框name

　　required: true// 驗證條件：必填

　　},

　　loginPassword: {// 需要進行驗證的輸入框name

　　required: true,// 驗證條件：必填

　　minlength: 5// 驗證條件：最小長度為5

　　},

　　email: {// 需要進行驗證的輸入框name

　　required: true,// 驗證條件：必填

　　email: true// 驗證條件：格式為email

　　}

　　},

　　messages: {

　　loginName: {

　　required: "用戶名不允許為空!"// 驗證未通過的消息

　　},

　　loginPassword: {

　　required: "密碼不允許為空!",

　　minlength: jQuery.format("密碼至少輸入 {0} 字符!")

　　},

　　email: {

　　required: "email不允許為空",

　　email: "郵件地址格式錯誤!"

　　}

　　}

　　3、使用meta String方式進行驗證，即驗證內容與寫入class中(注意meta String方式需要引入jquery.metadata.js文件)

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

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

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

　　< form id="validate" action="admin/transfer!save.action" method="post">

　　< input type="text" class="required" name="entity.name" />

　　< input type="text" class="email" name="entity.email" />

　　< input type="submit" class="button" value="提 交" />

　　< /form>

　　< script type="text/javascript">

　　$(document).ready(

　　function() {

　　$("#formId").validate({// #formId為需要進行驗證的表單ID

　　meta :"validate"// 采用meta String方式進行驗證(驗證內容與寫入class中)

　　errorElement :"div",// 使用"div"標簽標記錯誤， 默認:"label"

　　wrapper:"li",// 使用"li"標簽再把上邊的errorELement包起來

　　errorClass :"validate-error",// 錯誤提示的css類名"error"

　　onsubmit:true,// 是否在提交是驗證,默認:true

　　onfocusout:true,// 是否在獲取焦點時驗證,默認:true

　　onkeyup :true,// 是否在敲擊鍵盤時驗證,默認:true

　　onclick:false,// 是否在鼠標點擊時驗證(一般驗證checkbox,radiobox)

　　focusCleanup:false,// 當未通過驗證的元素獲得焦點時,并移除錯誤提示

　　});

　　})

　　< /script>

　　注意：在Struts2應用中經常用遇到name="entity.name"形式的input表單(即name中包含逗號或其它特殊符號時),我們可以將上述名稱以引號("")括起即可，如：

　　rules: {

　　"entity.loginName": {// 需要進行驗證的輸入框name

　　required: true// 驗證條件：必填

　　}

　　},

　　messages: {

　　"entity.loginName": {

　　required: "用戶名不允許為空!"// 驗證未通過的消息

　　}

　　}

　　可給我email:happyczx@126.com 歡迎一起探討有關java技術的問題

　　以上部分代碼來源于payj開源支付系統，這個java開源項目里面有很多優秀的Struts2 spring hibernate jquery 等框架的應用源碼，值得一看。在這里先推薦一下，呵呵。。。

　　ps：Jquery Validate 驗證規則

　　(1)required:true 必輸字段。

　　(2)remote:”check.php” 使用ajax方法調用check.php驗證輸入值。

　　(3)email:true 必須輸入正確格式的電子郵件。

　　(4)url:true 必須輸入正確格式的網址。

　　(5)date:true 必須輸入正確格式的日期。

　　(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。

　　Jquery Validate submit 提交

　　submitHandler: 通過驗證后運行的函數,里面要加上表單提交的函 數,否則表單不會提交。

　　$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); //用Jquery Form的函數 } })

　　Jquery Validate error 錯誤提示dom。

　　.errorPlacement：Callback Default: 把錯誤信息放在驗證的元素后面。

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

　　errorPlacement: function(error, element) {

　　error.appendTo(element.parent());

　　}

　　設置錯誤提示的樣式，可以增加圖標顯示，like：

　　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;

　　}

以上是“jquery.validate有什么相關參數”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！