JQuery validate 各項驗證規則講解

前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

使用樣例見：http://blog.csdn.net/jiangyu1013/article/details/56014730

//定義中文消息
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);

?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 自定義驗證規則

addMethod(name,method,message)方法：
參數name 是添加的方法的名字
參數method是一個函數,接收三個參數(value,element,param) value 是元素的值,element是元素本身param
是參數,我們可以用addMethod 來添加除built-in Validation methods 之外的驗證方法比如有一個字段,只
能輸一個字母,范圍是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 就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開

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 0px0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}

附錄：常用的自定義驗證規則

//?字符驗證
jQuery.validator.addMethod(“stringCheck”,?function(value,?element)?{
return?this.optional(element)?||?/^[u0391-uFFE5w]+$/.test(value);
},?”只能包括中文字、英文字母、數字和下劃線”);

//?中文字兩個字節
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]?);
},?”請確保輸入的值在3-15個字節之間(一個中文字算2個字節)”);

//?身份證號碼驗證
jQuery.validator.addMethod(“isIdCardNo”,?function(value,?element)?{
return?this.optional(element)?||?isIdCardNo(value);
},?”請正確輸入您的身份證號碼”);

//?手機號碼驗證
jQuery.validator.addMethod(“isMobile”,?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(“isTel”,?function(value,?element)?{
var?tel?=?/^d{3,4}-?d{7,9}$/;????//電話號碼格式010-12345678
return?this.optional(element)?||?(tel.test(value));
},?”請正確填寫您的電話號碼”);

//?聯系電話(手機/電話皆可)驗證
jQuery.validator.addMethod(“isPhone”,?function(value,element)?{
var?length?=?value.length;
var?mobile?=?/^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
var?tel?=?/^d{3,4}-?d{7,9}$/;
return?this.optional(element)?||?(tel.test(value)?||?mobile.test(value));

},?”請正確填寫您的聯系電話”);

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


function isIdCardNo(num) {

var factorArr = newArray(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=newArray(“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<intStrLen;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;

}

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) returnfalse
return true
}

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) returnfalse
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-uFFE5w]+$/.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}!”));

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/451899.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/451899.shtml
英文地址，請注明出處：http://en.pswp.cn/news/451899.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

數據結構與算法--8.二叉樹的基礎知識

數據結構與算法--8.二叉樹的基礎知識

文章目錄一. 二叉樹基本概念二. 二叉樹的性質三. 二叉樹的代碼實現四. 二叉樹的先序、中序、后序遍歷一. 二叉樹基本概念 二. 二叉樹的性質 三. 二叉樹的代碼實現 class Node(object):"""二叉樹節點"""def __init__(self,item):self.elem item…
閱讀更多...
ZooKeeper（二）ZooKeeper能做什么？

ZooKeeper（二）ZooKeeper能做什么？

上一節介紹了ZooKeeper的一些基礎知識&#xff0c;這一節主要講ZooKeeper有哪些用途。命名服務&#xff08;Name Service&#xff09; 主要是作為分布式命名服務&#xff0c;通過調用zk的create node api&#xff0c;能夠很容易創建一個全局唯一的path&#xff0c;這個path就可…
閱讀更多...
java數組知識

java數組知識

閱讀更多...
jquery vilidate 使用小例

jquery vilidate 使用小例

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 // 修改$("#updForm").validate({submitHandler:function(form){new $.flavr({ content : 是否確認修改管理員?,dialog : co…
閱讀更多...
RedHat Linux 7.3基礎環境搭建

RedHat Linux 7.3基礎環境搭建

文章目錄1&#xff0e;更改主機名2&#xff0e;關閉selinux3&#xff0e;關閉火墻4&#xff0e;重啟機器5&#xff0e;設置ip6&#xff0e;掛載yum源7&#xff0e;升級openssh8&#xff0e;安全基線9&#xff0e;時區10&#xff0e;時間同步11&#xff0e;安裝Vmtools12&#x…
閱讀更多...
開源http協議庫curl和wget的區別和使用

開源http協議庫curl和wget的區別和使用

curl和wget基礎功能有諸多重疊&#xff0c;如下載等。 在高級用途上的curl由于可自定義各種請求參數所以長于模擬web請求&#xff0c;用于測試網頁交互&#xff08;瀏覽器&#xff09;&#xff1b;wget由于支持ftp和Recursive所以長于下載&#xff0c;用于下載文件&#xff08;…
閱讀更多...
java類的設計技巧

java類的設計技巧

閱讀更多...
Spring聲明式事務管理、事務的傳播行為xml配置

Spring聲明式事務管理、事務的傳播行為xml配置

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. <tx:method name"insert*" propagation"REQUIRED" />中name的值是ServiceImpl中各個要加入事物管理的方法…
閱讀更多...
數據結構與算法--9.常見時間復雜度及其之間的關系

數據結構與算法--9.常見時間復雜度及其之間的關系

文章目錄1.常見時間復雜度2.常見時間復雜度之間的關系1.常見時間復雜度 2.常見時間復雜度之間的關系
閱讀更多...
CodeIgniter中運用composer安裝依賴包

CodeIgniter中運用composer安裝依賴包

2019獨角獸企業重金招聘Python工程師標準>>> 基本信息 CodeIgniter 版本&#xff1a;3.1.8Nginx&#xff1a; Tengine/2.1.2 (nginx/1.6.2)MySQL&#xff1a; Ver 14.14 Distrib 5.6.33, for Linux (x86_64) using EditLine wrapperPHP&#xff1a; 5.6.30Zend Engi…
閱讀更多...
屏幕分辨率

屏幕分辨率

http://cn.screenresolution.org/ 轉載于:https://www.cnblogs.com/qiqi715/p/9363587.html
閱讀更多...
數據結構與算法--10.利益最大值

數據結構與算法--10.利益最大值

1.題目 亞馬遜是一家納斯達克上市的公司&#xff0c;通過其財務報表我們可以解讀它在給定時期內的股票走勢信息。這些信息包括每天交易的最高價&#xff0c;最低價以及開盤價。假定你作為交易員&#xff0c;必須在股票開盤的時候做出買入或者賣出的決定。你負責設計一個算法&a…
閱讀更多...
shiro管理下MD5加密的使用

shiro管理下MD5加密的使用

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 正文&#xff1a; package com.service.impl;import java.util.ArrayList;import java.util.List;import javax.annotation.Resource…
閱讀更多...
BZOJ2425：[HAOI2010]計數——題解

BZOJ2425：[HAOI2010]計數——題解

https://www.lydsy.com/JudgeOnline/problem.php?id2425 https://www.luogu.org/problemnew/show/P2518 你有一組非零數字&#xff08;不一定唯一&#xff09;&#xff0c;你可以在其中插入任意個0&#xff0c;這樣就可以產生無限個數。比如說給定{1,2},那么可以生成數字12,21…
閱讀更多...
java繼承的問題

java繼承的問題

一個父類對象變量可以引用該父類的任何一個子類的對象。 但是子類是不能引用父類對象的&#xff0c;這違反類 is-a的規則。
閱讀更多...
用 @Value(“${xxxx}“)注解從配置文件讀取值的用法

用 @Value(“${xxxx}“)注解從配置文件讀取值的用法

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 用法&#xff1a; 從配置properties文件中讀取init.password 的值。 Value("${init.password}")private String initPwd…
閱讀更多...
scanf 輸入加逗號（或者不加逗號）出現的異常及解決方案

scanf 輸入加逗號（或者不加逗號）出現的異常及解決方案

我們在寫 C 語言代碼通常 scanf 的格式控制部分都有兩種習慣&#xff0c;加逗號與不加逗號&#xff0c;而這兩種情況都會因為我們的不同輸入習慣產生一定的問題&#xff0c;這里給出另一種方法。 1、不加逗號 1 #include<stdio.h>2 3 #define SWAP(a, b) aa^b;ba^b;aa^b;…
閱讀更多...
ant介紹

ant介紹

一般情況下&#xff0c;大多數軟件公司做開發的時候都不用myeclipse開發&#xff0c;這是利用ant部署就給我們帶來極大的方便&#xff0c;它先將你的project打包成war包&#xff0c;然后部署到指定的服務器中。Ant的概念 當一個代碼項目大了以后&#xff0c;每次重新編譯&…
閱讀更多...
IT大牛說的話，不得不記

IT大牛說的話，不得不記

編程經典語錄收集 01. Walking on water and developing software from a specification are easy if both are frozen. – Edward V Berard 在水中行走&#xff0c;和根據一份需求開發軟件一樣&#xff0c;如果它們都“凍”住了&#xff0c;那就容易了。—— 愛德華貝拉爾德 0…
閱讀更多...
linux用戶權限管理

linux用戶權限管理

閱讀更多...
最新文章

Copyright @ 2022~2023