詳解正則表達(dá)式表單驗(yàn)證實(shí)例
先看看效果圖:
首先給大家解釋一些符號(hào)相關(guān)的意義
* 匹配前面的子表達(dá)式零次或多次;
^ 匹配輸入字符串的開始位置;$匹配輸入字符串的結(jié)束位置
1. /^$/ 這個(gè)是個(gè)通用的格式。
2. 里面輸入需要實(shí)現(xiàn)的功能。
\d 匹配一個(gè)數(shù)字字符,等價(jià)于[0-9]
+ 匹配前面的子表達(dá)式一次或多次;
?匹配前面的子表達(dá)式零次或一次;
下面通過一段代碼給大家分析表單驗(yàn)證正則表達(dá)式,具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>正則驗(yàn)證常用表單方法</title> <script type="text/javascript"> function focus_username() { var resultObj=document.getElementById('result_username'); resultObj.innerHTML="以字母開頭的-位的字符"; resultObj.style.color="blue"; document.form.username.style="border:px solid red"; } // function blur_username () { //第一種方法: // var resultObj=document.getElementById('result_username') // if (document.form.username.value=='') { // resultObj.innerHTML="用戶名不能為空"; // resultObj.style.color="red"; // return false; // }else if (document.form.username.value.length<||document.form.username.value.length>) { // resultObj.innerHTML="用戶名字符長(zhǎng)度必須介于到個(gè)之間"; // resultObj.style.color="red"; // return false; // }else{ // resultObj.innerHTML="ok"; // resultObj.style.color="green"; // } // } function blur_username () { //第二種方法: var resultObj=document.getElementById('result_username') var pre=document.form.username.value; var reg=/^[a-zA-Z]\w{,}$/; if (pre=='') { resultObj.innerHTML="(必填項(xiàng))用戶名不能為空"; resultObj.style.color="red"; return false; }else if (!reg.test(pre)) { resultObj.innerHTML="用戶名字符輸入不合法"; resultObj.style.color="red"; return false; }else{ resultObj.innerHTML="ok"; resultObj.style.color="green"; return true; } } function focus_userpwd() { var resultObj=document.getElementById('result_userpwd'); resultObj.innerHTML="(必填項(xiàng))介于-位的非特殊字符"; resultObj.style.color="blue"; document.form.userpwd.style="border:px solid red"; } // function blur_userpwd () { // var resultObj=document.getElementById('result_userpwd') // if (document.form.userpwd.value=='') { // resultObj.innerHTML="用戶名密碼不能為空"; // resultObj.style.color="red"; // return false; // }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) { // resultObj.innerHTML="用戶名密碼字符長(zhǎng)度必須介于到個(gè)之間"; // resultObj.style.color="red"; // return false; // }else{ // resultObj.innerHTML="ok"; // resultObj.style.color="green"; // return true; // } // } function blur_userpwd () { var resultObj=document.getElementById('result_userpwd') var pre=document.form.userpwd.value; var reg=/^\w{,}$/; if (pre=='') { resultObj.innerHTML="(必填項(xiàng))用戶名密碼不能為空"; resultObj.style.color="red"; return false; }else if (!reg.test(pre)) { resultObj.innerHTML="用戶名密碼字符輸入不合法"; resultObj.style.color="red"; return false; }else{ resultObj.innerHTML="ok"; resultObj.style.color="green"; return true; } } function focus_userpwd() { var resultObj=document.getElementById('result_userpwd'); resultObj.innerHTML="(必填項(xiàng))介于-位的非特殊字符"; resultObj.style.color="blue"; document.form.userpwd.style="border:px solid red"; } // function blur_userpwd () { // var resultObj=document.getElementById('result_userpwd') // if (document.form.userpwd.value=='') { // resultObj.innerHTML="用戶名密碼不能為空"; // resultObj.style.color="red"; // return false; // }else if (document.form.userpwd.value!=document.form.userpwd.value) { // resultObj.innerHTML="兩次用戶名密碼輸入不一致"; // resultObj.style.color="red"; // return false; // }else{ // resultObj.innerHTML="ok"; // resultObj.style.color="green"; // return true; // } // } function blur_userpwd () { var resultObj=document.getElementById('result_userpwd') var pre=document.form.userpwd.value; var reg=/^\w{,}$/; if (pre=='') { resultObj.innerHTML="(必填項(xiàng))用戶名密碼不能為空"; resultObj.style.color="red"; return false; }else if (!reg.test(pre)) { resultObj.innerHTML="用戶名密碼字符輸入不合法"; resultObj.style.color="red"; return false; }else if(document.form.userpwd.value!=document.form.userpwd.value){ resultObj.innerHTML="兩次用戶名密碼輸入不一致"; resultObj.style.color="red"; return false; }else {resultObj.innerHTML="ok"; resultObj.style.color="green"; return true; } } function focus_Mobile() { var resultObj=document.getElementById('result_Mobile'); resultObj.innerHTML="請(qǐng)輸入你位數(shù)的手機(jī)號(hào)碼"; resultObj.style.color="blue"; document.form.Mobile.style="border:px solid red"; } function blur_Mobile() { var resultObj=document.getElementById('result_Mobile') var pre=document.form.Mobile.value; var reg=/^[||][-]{}$/; if (pre=='') { resultObj.innerHTML="手機(jī)號(hào)碼不能為空"; resultObj.style.color="red"; }else if (!reg.test(pre)) { resultObj.innerHTML="手機(jī)號(hào)碼字符輸入不合法"; resultObj.style.color="red"; }else { resultObj.innerHTML="ok"; resultObj.style.color="green"; } } function focus_Tel() { var resultObj=document.getElementById('result_Tel'); resultObj.innerHTML="請(qǐng)輸入你的座機(jī)號(hào)碼"; resultObj.style.color="blue"; document.form.Tel.style="border:px solid red"; } function blur_Tel() { var resultObj=document.getElementById('result_Tel') var pre=document.form.Tel.value; var reg=/^{}[-]{,}\-[]?[-]{}$/; if (pre=='') { resultObj.innerHTML="座機(jī)號(hào)碼不能為空"; resultObj.style.color="red"; }else if (!reg.test(pre)) { resultObj.innerHTML="座機(jī)號(hào)碼字符輸入不合法"; resultObj.style.color="red"; }else { resultObj.innerHTML="ok"; resultObj.style.color="green"; } } function focus_mail() { var resultObj=document.getElementById('result_mail'); resultObj.innerHTML="請(qǐng)輸入你的郵箱號(hào)碼"; resultObj.style.color="blue"; document.form.mail.style="border:px solid red"; } function blur_mail() { var resultObj=document.getElementById('result_mail'); var pre=document.form.mail.value; var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/; if (pre=='') { resultObj.innerHTML="郵箱號(hào)碼不能為空"; resultObj.style.color="red"; }else if (!reg.test(pre)) { resultObj.innerHTML="郵箱號(hào)碼字符輸入不合法"; resultObj.style.color="red"; }else { resultObj.innerHTML="ok"; resultObj.style.color="green"; } } function focus_ID() { var resultObj=document.getElementById('result_ID'); resultObj.innerHTML="(必填項(xiàng))請(qǐng)輸入你位的二代身份證號(hào)碼"; resultObj.style.color="blue"; document.form.ID.style="border:px solid red"; } function blur_ID() { var resultObj=document.getElementById('result_ID'); var pre=document.form.ID.value; var reg=/^[-]{}[-x]$/; if (pre=='') { resultObj.innerHTML="(必填項(xiàng))二代身份證號(hào)碼字符不能為空"; resultObj.style.color="red"; return false; }else if (!reg.test(pre)) { resultObj.innerHTML="二代身份證號(hào)碼字符輸入不合法"; resultObj.style.color="red"; return false; }else { resultObj.innerHTML="ok"; resultObj.style.color="green"; return true; } } function checkForm(){ var flag_username=blur_username(); var flag_userpwd=blur_userpwd(); var flag_userpwd=blur_userpwd(); var flag_ID=blur_ID(); if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) { return true; }else{ return false; } } </script> <style type="text/css"> body{background-image: url(images/.jpg);background-size: cover;} table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C} .vip{font-size: px;} </style> </head> <body> <form name="form" action=".php" method="post" onsubmit="return checkForm()"> <table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" > <tr> <th colspan="" class="vip">VIP會(huì)員注冊(cè)</th> </tr> <tr> <td width="px" align="right" >用戶名:</td> <td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td> <td><div width="px" id="result_username"></div></td> </tr> <tr> <td align="right">密碼:</td> <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td> <td><div id="result_userpwd"></div></td> </tr> <tr> <td align="right">確認(rèn)密碼:</td> <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td> <td><div id="result_userpwd"></div></td> </tr> <tr> <td align="right">手機(jī)號(hào)碼:</td> <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td> <td><div id="result_Mobile"></div></td> </tr> <tr> <td align="right">座機(jī)號(hào)碼:</td> <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td> <td><div id="result_Tel"></div></td> </tr> <tr> <td align="right">郵箱號(hào)碼:</td> <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td> <td><div id="result_mail"></div></td> </tr> <tr> <td align="right">二代身份證:</td> <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td> <td><div id="result_ID"></div></td> </tr> <tr> <td align="center" colspan=""><input type="submit" value="提交注冊(cè)" /> <input type="reset" value="重置資料" /></td> <td></td> </tr> </table> </form> </body> </html>
以上內(nèi)容就是表單驗(yàn)證正則表達(dá)式實(shí)例代碼,希望對(duì)大家有幫助。
- 表單驗(yàn)證正則表達(dá)式實(shí)例代碼詳解
- java正則表達(dá)式表單驗(yàn)證類工具類(驗(yàn)證郵箱、手機(jī)號(hào)碼、qq號(hào)碼等)
- 通過正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證是否為中文
- JavaScript常用的正則表達(dá)式表單驗(yàn)證代碼
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- 常用正則表達(dá)式范例 方便表單驗(yàn)證
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- php使用ereg驗(yàn)證文件上傳的方法
- ThinkPHP實(shí)現(xiàn)帶驗(yàn)證碼的文件上傳功能實(shí)例
- 表單正則驗(yàn)證及文件上傳驗(yàn)證功能
相關(guān)文章
正則表達(dá)式斷言、巡視(Assertions)、正向斷言、反向斷言介紹
這篇文章主要介紹了正則表達(dá)式斷言、巡視(Assertions)、正向斷言、反向斷言介紹,需要的朋友可以參考下2015-10-10js正則匹配markdown里的圖片標(biāo)簽的實(shí)現(xiàn)
這篇文章主要介紹了js正則匹配markdown里的圖片標(biāo)簽的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12密碼強(qiáng)度的正則表達(dá)式兩種方案JS總結(jié)篇
本文給出了兩個(gè)密碼強(qiáng)度的正則表達(dá)式方案,一個(gè)簡(jiǎn)單,一個(gè)更復(fù)雜和安全。并分別給出了兩個(gè)方案的解析和測(cè)試程序。對(duì)密碼強(qiáng)度正則表達(dá)式的兩種方案感興趣的朋友跟隨腳本之家一起看看吧2018-03-03正則表達(dá)式學(xué)習(xí)教程之回溯引用backreference詳解
這篇文章主要介紹了正則表達(dá)式學(xué)習(xí)教程之回溯引用backreference,結(jié)合實(shí)例形式詳細(xì)分析了回溯引用的概念、功能及實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01解決正則表示式匹配($regex)引起的一次mongo數(shù)據(jù)庫(kù)cpu占用率高的問題
這篇文章主要介紹了由正則表示式匹配($regex)引起的一次mongo數(shù)據(jù)庫(kù)cpu占用率高的問題,本文通過實(shí)例給大家分析的非常詳細(xì),需要的朋友可以參考下2019-11-11iOS中使用正則表達(dá)式NSRegularExpression 來驗(yàn)證textfiled輸入的內(nèi)容
一個(gè)正則表達(dá)式(regexp)是由元字符和文字?jǐn)?shù)字的文本字符,或者“文字的”(abc,123,及其他)混合組合而成的文本模式。 該類型用于匹配文本字符——并附有匹配的結(jié)果,是成功還是失敗。 Regexps 主要用于規(guī)則文本匹配以及搜索和替換。2015-09-09