當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery基础之正则表达式及表单验证

發(fā)布時間：2023/12/18 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery基础之正则表达式及表单验证小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這篇博客就來總結(jié)一下正則表達(dá)式以及表單驗證，由于最近在練習(xí)jQuery，所以就用jQuery來寫一寫。

一、正則表達(dá)式
正則表達(dá)式的作用是用來驗證字符串的格式。雖然它的內(nèi)容比較繁瑣，但是功能很強(qiáng)大。它的寫法很隨意，但是要注意語法規(guī)則，在此前提下就可以自己隨意拼接。

1、速查表
\ ：將下一個字符標(biāo)記為一個特殊字符、或一個原義字符、或一個向后引用、或一個八進(jìn)制轉(zhuǎn)義符。
^ ：匹配輸入字符串的開始位置。
$ ：匹配輸入字符串的結(jié)束位置。
：匹配前面的子表達(dá)式零次或多次。
+：匹配前面的子表達(dá)式一次或多次。
?：匹配前面的子表達(dá)式零次或一次。
{n}： n是一個非負(fù)整數(shù)。匹配確定的n次。
{n,}： n是一個非負(fù)整數(shù)。至少匹配n次。
{n,m}： m和n均為非負(fù)整數(shù)，其中n<=m。最少匹配n次且最多匹配m次。
?：當(dāng)該字符緊跟在任何一個其他限制符（,+,?，{n}，{n,}，{n,m}）后面時，匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字符串，而默認(rèn)的貪婪模式則盡可能多的匹配所搜索的字符串。
.：匹配除“\n”之外的任何單個字符。
x|y：匹配x或y。
[xyz]：字符集合。匹配所包含的任意一個字符。
[^xyz]：負(fù)值字符集合。匹配未包含的任意字符。
[a-z]：字符范圍。匹配指定范圍內(nèi)的任意字符。
[^a-z]：負(fù)值字符范圍。匹配任何不在指定范圍內(nèi)的任意字符。
\b：匹配一個單詞邊界，也就是指單詞和空格間的位置。
\B：匹配非單詞邊界。
\cx：匹配由x指明的控制字符。
\d：匹配一個數(shù)字字符。
\D：匹配一個非數(shù)字字符。
\f：匹配一個換頁符。
\n：匹配一個換行符。
\r：匹配一個回車符。
\s：匹配任何空白字符，包括空格、制表符、換頁符等等。
\S：匹配任何非空白字符。
\t：匹配一個制表符。
\v：匹配一個垂直制表符。
\w：匹配包括下劃線的任何單詞字符。
\W：匹配任何非單詞字符。
\xn：匹配n，其中n為十六進(jìn)制轉(zhuǎn)義值。十六進(jìn)制轉(zhuǎn)義值必須為確定的兩個數(shù)字長。
\num：匹配num，其中num是一個正整數(shù)。對所獲取的匹配的引用。

2、常用的正則表達(dá)式

用戶名： /^[a-z0-9_-]{3,16}$/密碼： /^[a-z0-9_-]{6,18}$/十六進(jìn)制值： /^#?([a-f0-9]{6}|[a-f0-9]{3})$/電子郵箱： /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/URL： /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/IP 地址： /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/ /^(?:(?: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]?)$/HTML 標(biāo)簽： /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/刪除代碼\\注釋： (?<!http:|\S)//.*$Unicode編碼中的漢字范圍： /^[\u2E80-\u9FFF]+$/

二、表單驗證

表單驗證是將表單中輸入的內(nèi)容進(jìn)行正則檢索，如果格式符合返回true，不符合返回false。

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.block {width: 400px;height: 470px;border: 1px solid #000;margin: auto;}li {position: relative;list-style: none;margin: 30px 0;text-align: center;}li.lilist > label {display: inline-block;width: 70px;font-size: 13px;text-align: right;}li.lilist > input {display: inline-block;width: 290px;height: 27px;line-height: 27px;outline: none;box-sizing: border-box;padding-left: 10px;border: 1px solid #c0c0c0;}.libtn > input {width: 180px;display: inline-block;height: 30px;outline: none;font-size: 13px;margin: 0 10px;}.info {position: absolute;width: 290px;top: 26px;font-size: 12px;left: 90px;text-align: left;}.info > span {display: none;}.success {color: #5fe01b;}.error {color: #ff1c26;}</style> </head> <body>  <div class="block"><form action="" method="post" class="formData"><ul><li class="lilist"><label>用戶名：</label><input name="userid" class="userid" type="text"/><div class="info"><span></span></div></li><li class="lilist"><label>密碼：</label><input name="userpwd" class="userpwd" type="password"/><div class="info"><span></span></div></li><li class="lilist"><label>確認(rèn)密碼：</label><input name="userpwdtwo" class="userpwdtwo" type="password"/><div class="info"><span></span></div></li><li class="lilist"><label>郵箱：</label><input name="useremail" class="useremail" type="text"/></li><li class="lilist"><label>電話：</label><input name="usertel" class="usertel" type="text"/></li><li class="lilist"><label>地址：</label><input name="useraddress" class="useraddress" type="text"/></li><li class="lilist"><label>身份證：</label><input name="useridcard" class="useridcard" type="text"/></li><li class="libtn"><input type="submit" value="注冊"/><input type="reset" value="清空"/></li></ul></form> </div> <script src="jquery/jquery.js"></script> <script>$(function () {//驗證的格式var regForm = {userid: function (index) {var success = "*用戶名輸入正確！";var error = "*用戶名長度為6-10位，可以包含符號_、+、-、&、$、*";//這些方法里面的this指針已經(jīng)被替換為了$(this)var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;if (this.val().match(reg)) {$(".info").eq(index).find("span").removeClass().addClass("success").show().html(success);}else {$(".info").eq(index).find("span").removeClass().addClass("error").show().html(error);}},userpwd: function (index) {var success = "*密碼輸入正確！";var error = "*密碼長度為8-10位，可以包含符號_、-";var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;if (this.val().match(reg)) {$(".info").eq(index).find("span").removeClass().addClass("success").show().html(success);}else {$(".info").eq(index).find("span").removeClass().addClass("error").show().html(error);}},userpwdtwo: function (index) {var success = "*兩次密碼一致！";var error = "*兩次密碼不一致";if (this.val() == "") {$(".info").eq(index).find("span").removeClass().addClass("error").show().html("*密碼不能為空！");}else {if (this.val() == this.parent().prev().find("input").val()) {$(".info").eq(index).find("span").removeClass().addClass("success").show().html(success);}else {$(".info").eq(index).find("span").removeClass().addClass("error").show().html(error);}}},useremail: function () {console.log("useremail驗證方法");},usertel: function () {console.log("usertel驗證方法");},useraddress: function () {console.log("useraddress驗證方法");},useridcard: function () {console.log("useridcard驗證方法");}};//點擊提交的時候一次性驗證$(".formData").submit(function () {//在表單提交的時候 form的submit事件里面的返回值影響表單的提交//return false; 不提交//return true 提交$(".lilist").find("input").each(function (index) {var className = $(this).attr("class");//$(this) 替換對象里面的this//call apply 替換對象的指針//call(this,1,2)//apply(this,[1,2])//在你call 或者apply的時候回自動執(zhí)行替換對象的方法regForm[className].apply($(this), [index]);});//表單提交的時候到底是true還是false//根據(jù)當(dāng)前頁面是否存在error 類var len = $(".error").length;if (len) {return false;}return true;});}); </script> </body> </html>

三、總結(jié)
在正則表達(dá)式和表單驗證這里需要注意的是正則的使用，需要記憶這么多的正則數(shù)寫規(guī)范，然后用它來實現(xiàn)檢索和驗證。

總結(jié)

以上是生活随笔為你收集整理的jQuery基础之正则表达式及表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： svn process exited w
下一篇： Pytorch显存分配机制与显存占用分析