這篇文章主要講解了JS如何使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商,擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù),十載企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都上1000+客戶提供網(wǎng)頁設(shè)計(jì)制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),同時(shí)也為不同行業(yè)的客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè),傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)公司。
表單驗(yàn)證是一個(gè)網(wǎng)站或應(yīng)用的重點(diǎn),一條合適的錯(cuò)誤提示不僅可以減少無效信息錄入,更會(huì)給用戶留下良好的使用體驗(yàn)。但表單設(shè)計(jì)千差萬別,用戶輸入更不可控。一方面,我們要減少出錯(cuò)提示(這會(huì)引起用戶反感),而另一方面,我們則希望得到足夠多的有效信息。魚和熊掌如何兼得?
設(shè)計(jì)合適的提示信息;
如何將錯(cuò)誤信息合適的展示給用戶,我想是見仁見智,需要根據(jù)具體項(xiàng)目具體分析(參考淘寶、京東等電商設(shè)計(jì))。這里主要討論第二種方案:通過正則表達(dá)式最大限度的過濾用戶輸入
這里先列出我自己常用的正則表達(dá)式,然后在深入全面的學(xué)習(xí)它!
文本輸入(拒絕表情):/^[\u4e00-\u9fa5\w]+.*$/gi
密碼:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
中文地址(以中文開始,包含英文字符、數(shù)字、括號(hào)):/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()()]*$/
身份證:/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
電子郵箱:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
傳真:/^(\d{3,4}-)?\d{7,8}$/
網(wǎng)址:/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
座機(jī):/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
手機(jī):/^1[34578]\d{9}$/
郵編:/^[1-9][0-9]{5}$/
/** * @param {Object} $input 需要驗(yàn)證的輸入項(xiàng) * @param {String} reg 正則表達(dá)式 * @param {String} tips 提示信息 */ function isInfoValid($input, reg, tips) { var val = $input.val().trim(); if(val == '') { $input.next().remove(); $input.after('<span class="valid-error">*'+$input.siblings("label").text().trim()+'不能為空!<span>') } else if(reg && tips && !reg.test(val)) { $input.next().remove(); $input.after('<span class="valid-error">'+ tips +'</span>') }else { $input.next().remove(); } } // 可以這樣使用 isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*請(qǐng)輸入正確的郵編!');
有兩種方法實(shí)例化RegExp
對(duì)象
字面量
var reg = /\bis\b/g; // 全局匹配單詞is
構(gòu)造函數(shù)
var reg = new RegEXP('\\bis\\b',g)
g:global全文搜索,不添加,搜索到第一個(gè)匹配停止 默認(rèn)false,只讀
i:ignore case 忽略大小寫, 默認(rèn)false,只讀
m:multiple lines 多行搜索 默認(rèn)false,只讀
lastIndex: 是當(dāng)前表達(dá)式匹配內(nèi)容的最后一個(gè)字符的下一個(gè)位置
source:正則表達(dá)式的文本字符串
> var reg1 = /\w/gim;
> reg1.source
< "\w"
正則表達(dá)式由兩種基本字符類型組成:
原義文本字符
a,b,c,d..
元字符
*+?$ ^ . | \ ( ){ } [ ]
\t | 水平制表符 |
---|---|
\v | 垂直制表符 |
\n | 換行符 |
\r | 回車符 |
\0 | 空字符 |
\f | 換頁符 |
所謂類是指符合某些特征的對(duì)象,一個(gè)泛指,不是特指某個(gè)字符
表達(dá)式
[abc]
把字符a或b或c歸為一類,表達(dá)式可以匹配這類字符
使用元字符 ^ 創(chuàng)建反向類
表達(dá)式
[^abc]
表示 不是字符a或b或c的內(nèi)容
使用[a-z]來連接兩個(gè)字符表示從a到z的任意字符,閉區(qū)間,包含a 和 z 本身
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
范圍類可以連寫 [a-zA-Z]
> '2015-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
字符 | 等價(jià)類 | 含義 |
---|---|---|
. | [^\r\n] | 除了回車符和換行符以外的所有字符 |
\d | [0-9] | 數(shù)字字符 |
\D | [^0-9] | 非數(shù)字字符 |
\s | [\t\n\x0B\f\r] | 空白字符 |
\w | [a-zA-Z_0-9] | 單詞字符(字母數(shù)字下劃線) |
\W | [^a-zA-Z0-9_] | 非單詞字符 |
字符 | 含義 |
---|---|
^ | 以XXXXX開始 |
$ | 以xxxx結(jié)束 |
\b | 單詞邊界 |
\B | 非單詞邊界 |
字符 | 含義 |
---|---|
? | 出現(xiàn)零次或一次(最多出現(xiàn)1次) |
+ | 出現(xiàn)一次或多次 |
* | 出現(xiàn)零次或多次(任意 |
{n} | 出現(xiàn)n次 |
{n,m} | 出現(xiàn)n到m次 |
{n,} | 至少出現(xiàn)n次 |
在正則表達(dá)式中,默認(rèn)盡可能多的匹配
> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"
讓正則表達(dá)誰盡可能少的匹配,也就是說一旦成功匹配就不再繼續(xù)嘗試
做法很簡單,在量詞后面加一個(gè) ?即可
> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]
使用 ()可以達(dá)到分組的功能,使量詞作用于分組
> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"
使用 | 表示 或
> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"
> '2016-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2016"
忽略分組
不希望捕獲某些分組,只需要在分組內(nèi)加上 ?:
(?:Byron).(ok)
看完上述內(nèi)容,是不是對(duì)JS如何使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標(biāo)題名稱:JS如何使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能
鏈接分享:http://muchs.cn/article2/ijoioc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)