JavaScript正則表達(dá)式實(shí)現(xiàn)注冊(cè)信息校驗(yàn)功能
Java和JavaScript正則表達(dá)式的對(duì)比 Java中也有正則表達(dá)式,默認(rèn)情況下必須要精確匹配 ;而在JS中默認(rèn)是模糊匹配,只要字符串包含了正則表達(dá)式的內(nèi)容就返回true
正則表達(dá)式 | 匹配字符串 | Java中匹配結(jié)果 | JavaScript中匹配結(jié)果 |
---|---|---|---|
\d{3} | a123b | false | true |
^\d{3} | 123b | false | true |
\d{3}$ | a123 | false | true |
^\d{3}$ | 123 | true | true |
注冊(cè)信息校驗(yàn)
需求
- 在JS中使用正則表達(dá)式進(jìn)行驗(yàn)證。
- 用戶名:只能由英文字母和數(shù)字組成,長(zhǎng)度為4~16個(gè)字符,并且以英文字母開(kāi)頭
- 密碼: 大小寫(xiě)字母和數(shù)字6-20個(gè)字符
- 確認(rèn)密碼:兩次密碼要相同
- 電子郵箱: 符合郵箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
- 手機(jī)號(hào):/^1[34578]\d{9}$/
- 生日:生日的年份在1900~2009之間,生日格式為1980-5-12或1988-05-04的形式,/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
案例分析
- 創(chuàng)建正則表達(dá)式
- 得到文本框中輸入的值
- 如果不匹配,在后面的span中顯示錯(cuò)誤信息,返回false
- 如果匹配,在后面的span中顯示一個(gè)打勾圖片,返回true
- 寫(xiě)一個(gè)驗(yàn)證表單中所有的項(xiàng)的方法,所有的方法都返回true,這個(gè)方法才返回true.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>驗(yàn)證注冊(cè)頁(yè)面</title> <style type= "text/css"> body { margin: 0; padding: 0; font‐size: 12px; line‐height: 20px; } .main { width: 525px; margin‐left: auto; margin‐right: auto; } .hr_1 { font‐size: 14px; font‐weight: bold; color: #3275c3; height: 35px; border‐bottom‐width: 2px; border‐bottom‐style: solid; border‐bottom‐color: #3275c3; vertical‐align: bottom; padding‐left: 12px; } .left { text‐align: right; width: 80px; height: 25px; padding‐right: 5px; } .center { width: 280px; } .in { width: 130px; height: 16px; border: solid 1px #79abea; } .red { color: #cc0000; font‐weight: bold; } div { color: #F00; } </style> <script type="text/javascript"> //驗(yàn)證表單中所有的項(xiàng) function checkAll () { //所有的方法都返回true,這個(gè)方法才返回true return checkUser() && checkMail(); } //驗(yàn)證用戶名 function checkUser () { //1. 創(chuàng)建正則表達(dá)式 var reg = /^[a‐zA‐Z][a‐zA‐Z0‐9]{3,15}$/; //2. 得到文本框中輸入的值 var value = document.getElementById("user").value; //3. 如果不匹配,在后面的span中顯示錯(cuò)誤信息,返回false if (reg.test(value)==false) { document.getElementById("userInfo").innerHTML = "用戶名不正確"; return false; } //4. 如果匹配,在后面的span中顯示一個(gè)打勾圖片,返回true else { document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>"; return true; } } //驗(yàn)證郵箱 function checkMail () { //1. 創(chuàng)建正則表達(dá)式 var reg = /^\w+@\w+(\.[a‐zA‐Z]{2,3}){1,2}$/; //2. 得到文本框中輸入的值 var value = document.getElementById("email").value; //3. 如果不匹配,在后面的span中顯示錯(cuò)誤信息,返回false if (reg.test(value)==false) { document.getElementById("emailInfo").innerHTML = "郵箱格式不正確"; return false; } //4. 如果匹配,在后面的span中顯示一個(gè)打勾圖片,返回true else { document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>"; return true; } } </script> </head> <body> <form action="server" method="post" id="myform" onsubmit="return checkAll()"> <table class="main" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td> </tr> <tr> <td class="hr_1">新用戶注冊(cè)</td> </tr> <tr> <td style="height:10px;"></td> </tr> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <!‐‐ 長(zhǎng)度為4~16個(gè)字符,并且以英文字母開(kāi)頭 ‐‐> <td class="left">用戶名:</td> <td class="center"> <input id="user" name="user" type="text" class="in" onblur="checkUser()"/> <span style="color: red" id="userInfo"></span> </td> </tr> <tr> <!‐‐ 不能為空, 輸入長(zhǎng)度大于6個(gè)字符 ‐‐> <td class="left">密碼:</td> <td class="center"> <input id="pwd" name="pwd" type="password" class="in" /> </td> </tr> <tr> <!‐‐ 不能為空, 與密碼相同 ‐‐> <td class="left">確認(rèn)密碼:</td> <td class="center"> <input id="repwd" name="repwd" type="password" class="in"/> </td> </tr> <tr> <!‐‐ 不能為空, 郵箱格式要正確 ‐‐> <td class="left">電子郵箱:</td> <td class="center"> <input id="email" name="email" type="text" class="in" onblur="checkMail()"/> <span id="emailInfo" style="color: red;"></span> </td> </tr> <tr> <!‐‐ 不能為空, 使用正則表達(dá)式自定義校驗(yàn)規(guī)則,1開(kāi)頭,11位全是數(shù)字 ‐‐> <td class="left">手機(jī)號(hào)碼:</td> <td class="center"> <input id="mobile" name="mobile" type="text" class="in"/> </td> </tr> <tr> <!‐‐ 不能為空, 要正確的日期格式 ‐‐> <td class="left">生日:</td> <td class="center"> <input id="birth" name="birth" type="text" class="in"/> </td> </tr> <tr> <td class="left"> </td> <td class="center"> <input name="" type="image" src="img/register.jpg" /> </td> </tr> </table></td> </tr> </table> </form> </body> </html>
到此這篇關(guān)于JavaScript正則表達(dá)式實(shí)現(xiàn)注冊(cè)信息校驗(yàn)的文章就介紹到這了,更多相關(guān)js正則表達(dá)式注冊(cè)信息校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
請(qǐng)教一個(gè)正則表達(dá)式,匹配所有Html標(biāo)簽外部的指定字符串
請(qǐng)教一個(gè)正則表達(dá)式,匹配所有Html標(biāo)簽外部的指定字符串...2007-02-02JavaScript正則表達(dá)式校驗(yàn)非零的正整數(shù)實(shí)例
本文分享了JavaScript正則表達(dá)式(^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$)校驗(yàn)非零的正整數(shù)實(shí)例代碼,代碼簡(jiǎn)單易懂,需要的朋友可以看下2016-12-12JavaScript中正則表達(dá)式的概念與應(yīng)用
這篇文章主要介紹了JavaScript中正則表達(dá)式的概念與應(yīng)用的相關(guān)資料,需要的朋友可以參考下2017-10-10php 正則表達(dá)式提取網(wǎng)頁(yè)超級(jí)鏈接url的函數(shù)
php 正則表達(dá)式提取網(wǎng)頁(yè)超級(jí)鏈接url的函數(shù)2010-01-01linux grep不區(qū)分大小寫(xiě)查找字符串方法
這篇文章主要介紹了linux grep不區(qū)分大小寫(xiě)查找字符串方法,需要的朋友可以參考下2020-03-03