當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery-表单校验

發布時間：2023/12/18 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery-表单校验小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

為什么要表單驗證

? ? 1.減輕服務器的壓力? ? ? 2.保證輸入的數據符合要求

常用的表單驗證

日期格式

表單元素是否為空

用戶名和密碼

E-mail地址

身份證號碼

表單選擇器

語法	描述	示例
:input	匹配所有input、textarea、select和button 元素	$("#myform? :input")選取表單中所有的input、select和button元素
:text	匹配所有單行文本框	$("#myform? :text")選取email 和姓名兩個input 元素
:password	匹配所有密碼框	$("#myform? :password"?)選取所有 <input type="password" />元素
:radio	匹配所有單項按鈕	$("#myform? :radio")選取<input type="radio" />元素
:checkbox	匹配所有復選框	$(" #myform? :checkbox "?)選取 <input type="checkbox " />元素
:submit	匹配所有提交按鈕	$("#myform? :submit "?)選取 <input type="submit " />元素

語法	描述	示例
:image	匹配所有圖像域	$("#myform? :image"?)選取 <input type=" image" />元素
:reset	匹配所有重置按鈕	$(" #myform? :reset "?)選取 <input type=" reset " />元素
:button	匹配所有按鈕	$("#myform? :button"?)選取button 元素
:file	匹配所有文件域	$(" #myform? :file"?)選取 <input type=" file " />元素
:hidden	匹配所有不可見元素，或者type 為hidden的元素	$("#myform? :hidden"?)選取<input type="hidden " />、style="display: none"等元素

屬性過濾選擇器

語法	描述	示例
:enabled	匹配所有可用元素	$(" #userform :enabled"?)匹配form內部除編號輸入框外的所有元素
:disabled	匹配所有不可用元素	$(" #userform :disabled"?)匹配編號輸入框
:checked	匹配所有被選中元素（復選框、單項按鈕、select 中的option）	$(" #userform :checked"?)匹配“性別”中的“男”選項和“愛好”中的“編程”選項
:selected	匹配所有選中的option 元素	$(" #userform :selected"?) 匹配“家鄉”中的“北京”選項

驗證表單內容：

使用String 對象驗證郵箱：不能為空，格式正確。

非空驗證：

if (mail == "") {??????? 【檢測Email是否為空】alert("Email不能為空");return false;}

字符串查找：indexOf()：

查找某個指定的字符串值在字符串中首次出現的位置

var str="this is JavaScript";var selectFirst=str.indexOf("Java");??? 【返回8】var selectSecond=str.indexOf("Java",12);??????? 【返回-1】

文本框內容的驗證：

密碼不能為空，不少于6個字符，姓名不能為空，不能有數字。

長度驗證：

if(pwd.length<6){????????? 【length屬性可以獲取字符串長度】alert("密碼必須等于或大于6個字符");return false;}

判斷字符串是否有數字：

使用for循環和substring()方法依次截斷單個字符，再判斷每個字符是否是數字

for (var i = 0; i < user.length; i++) {var j = user.substring(i, i + 1);???? 【截取單個字符】if (isNaN(j)?== false) {alert("姓名中不能包含數字");return false;}}

表單驗證事件和方法

表單驗證需要綜合運用元素的事件和方法：

類別	名稱	描述
事件	onblur	失去焦點，當光標離開某個文本框時觸發
事件	onfocus	獲得焦點，當光標進入某個文本框時觸發
方法	blur()	從文本域中移開焦點
	focus()	在文本域中設置焦點，即獲得鼠標光標
	select()	選取文本域中的內容，突出顯示輸入區域的內容

正則表達式：

為什么需要正則表達式：

簡潔的代碼

嚴謹的驗證文本框中的內容

示例：

var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;if(reg.test(email) ==false){???$email_prompt.html("電子郵件格式不正確,請重新輸入");return false; ? }

普通方式：

var reg=/表達式/附加參數

var reg=/white/;var reg=/white/g;

【表達式必須是常量字符串】

【用某些附加參數來代表一些規則：g代表可以進行全局匹配；i代表不區分大小寫；m代表可以進行多行匹配】

構造函數：var reg=new RegExp("表達式","附加參數")

var reg=new RegExp("white");var reg=new RegExp("white","g");

【表達式必須是可以是字符串，也可以是JavaScript當中的常量】

簡單模式：

只能表示具體的匹配

var reg=/china/;var reg=/abc8/;

復合模式：可以使用通配符表達更為抽象的規則模式

var reg=/^\w+$/;var reg=/^\w+@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;

RegExp對象：

RegExp對象的方法：

方法	描述
exec	檢索字符中是正則表達式的區配，返回找到的值，并確定其位置
test	檢索字符串中指定的值，返回true或false

RegExp對象的屬性：

屬性	描述
global	RegExp對象是否具有標志g
ignoreCase	RegExp對象是否具有標志i
multiline	RegExp對象是否具有標志m

String對象：

String對象的方法：

方法	描述
match	找到一個或多個正則表達式的匹配
search	檢索與正則表達式相匹配的值
replace	替換與正則表達式匹配的字符串
split	把字符串分割為字符串數組

Match和search的區別：

search在一個字串對象中查找關鍵詞字串，若匹配則返回關鍵詞在目標字串中第一次出現的位置序列，如果不匹配，就返回-1；search方法只關心有無匹配，找到匹配，就提供返回值，并中斷查找。

match是在目標字串對象中尋找與關鍵詞匹配與否的一個方法，它能通過關鍵詞的規則創建實現復雜搜尋功能；不建立規則的前提下，match可當作search來使用，語法也一樣，不同的是，若匹配它返回的是關鍵詞自身，若不匹配返回null。

正則表達式符號：

符號	描述
/…/	代表一個模式的開始和結束
^	匹配字符串的開始
$	匹配字符串的結束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一個數字字符，等價于[0-9]
\D	除了數字之外的任何字符，等價于[^0-9]
\w	匹配一個數字、下劃線或字母字符，等價于[A-Za-z0-9_]
\W	任何非單字字符，等價于[^a-zA-z0-9_]
.	除了換行符之外的任意字符

符號	描述
{n}	匹配前一項n次
{n,}	匹配前一項n次，或者多次
{n,m}	匹配前一項至少n次，但是不能超過m次
*	匹配前一項0次或多次，等價于{0,}
+	匹配前一項1次或多次，等價于{1,}
？	匹配前一項0次或1次，也就是說前一項是可選的，等價于{0,1}

正則示例：

對年齡進行驗證，年齡必須在0－120之間

0-9這個范圍是一位，正則表達式為\d

10-99這個范圍都是兩位數，正則表達式為[1-9]\d

100-119這個范圍是三位數，正則表達式為1[0-1]\d

所有年齡的個位都是0-9，當百位是1，十位是0-1，正則表達式為(1[0-1]|[1-9])?\d

年齡120是單獨的一種情況，需要單獨列出來

驗證方法示例：

用.test來檢測是否符合設置的正則表達式

$(document).ready(function(){$("#code").blur(function(){var code = $(this).val();var $codeId = $("#divCode");var regCode = /^\d{6}$/;if (regCode.test(code) == false) {$codeId.html("郵政編碼不正確，請重新輸入");return false;}$codeId.html("");return true; ???}? );

使用HTML5的方式驗證表單：

HTML5新增驗證屬性：

屬性	描述
placeholder	提供一種提示（hint），輸入域為空時顯示，獲得焦點輸入內容后消失
required	規定輸入域不能為空
pattern	規定驗證input域的模式（正則表達式）

示例：

validity屬性：

為了在使用required、pattern時有更好的提示

屬性	描述
valueMissing	表單元素設置了required特性，則為必填項。如果必填項的值為空，就無法通過表單驗證，valueMissing屬性會返回true，否則返回false。
typeMismatch	輸入值與type類型不匹配。HTML 5新增的表單類型如email、number、url等，都包含一個原始的類型驗證。如果用戶輸入的內容與表單類型不符合，則typeMismatch屬性將返回true，否則返回false。
patternMismatch	輸入值與pattern特性的正則表達式不匹配。如果輸入的內容不符合pattern驗證模式的規則，則patternMismatch屬性將返回true，否則返回false。

屬性	描述
stepMismatch	輸入的值不符合step特性所推算出的規則。用于填寫數值的表單元素可能需要同時設置min、max和step特性，這就限制了輸入的值必須是最小值與step特性值的倍數之和。例如范圍從0到10，step特性值為2，因為合法值為該范圍內的偶數，其他數值均無法通過驗證。如果輸入值不符合要求，則stepMismatch屬性返回true，否則返回false
customError	使用自定義的驗證錯誤提示信息。使用setCustomValidity( )方法自定義錯誤提示信息：setCustomValidity(message)會把錯誤提示信息自定義為message，此時customError屬性值為true；setCustomValidity("")會清除自定義的錯誤信息，此時customError屬性值為false。

總結

以上是生活随笔為你收集整理的jQuery-表单校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。