正則表單聯(lián)系

第一步，布局

再練習(xí)之前，我上網(wǎng)查了一些網(wǎng)站的登陸注冊(cè)頁(yè)面，一般都是可以兼容手機(jī)端和pc端，所以我使用了bootstarp進(jìn)行布局，正好也再次練習(xí)一下bootstarp的使用。
bootstarp中文網(wǎng)地址分享給大家
http://www.bootcss.com/

話不多說(shuō)，直接上圖：

第二步，書(shū)寫(xiě)表單驗(yàn)證js

首先，我們需要練習(xí)正則表達(dá)式

郵箱大家都知道，但是如何用正則來(lái)表示郵箱的格式呢？

我們大家都知道，郵箱必須有一個(gè)@符號(hào)，然后還有一個(gè).,最后跟著一個(gè)域名，所以我們需要這樣書(shū)寫(xiě)：

var emlReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

然后需要書(shū)寫(xiě)名稱以及密碼

var nameReg = ^[\u4e00-\u9fa5]{2,}$

弱密碼是6個(gè)以上的數(shù)字字母不包括漢字：

var pwReg1 = /^[0-9a-zA-Z]{6,}$/

強(qiáng)密碼(必須包含大小寫(xiě)字母和數(shù)字的組合，不能使用特殊字符和漢字，長(zhǎng)度在6個(gè)以上)：

var pwReg2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/

然后我們就需要書(shū)寫(xiě)js

var falg1 = falg2 = falg3 = false;function sd(x,y,z){if(x.attr("id")=="btn3"){x.siblings(".sps").text("弱");if(reg5.test(x.val())){x.siblings(".sps").text("強(qiáng)");}} } function ab (x,y,z){if(y.test(x.val())){x.parent().removeClass("has-error")x.parent().addClass("has-success")sd(x,y,z)return true; }else{x.parent().addClass("has-error")x.parent().removeClass("has-success")alert(z)return false;} } $("#btn1").blur(function(){var text = "郵箱格式錯(cuò)誤"falg1=ab($(this),emlReg,text) }) $("#btn2").blur(function(){var text = "用戶名格式錯(cuò)誤，請(qǐng)輸入至少2個(gè)漢字"falg2=ab($(this),nameReg,text) }) $("#btn3").blur(function(){var text = "密碼格式錯(cuò)誤，請(qǐng)輸入至少6個(gè)英文或數(shù)字"falg3=ab($(this),pwReg1,text) })$("#zhuce").click(function(){$("#btn1").blur()$("#btn2").blur()$("#btn3").blur()if(falg1&&falg2&&falg3){alert("填寫(xiě)成功，正在提交，請(qǐng)稍后……")} })

這樣，一個(gè)簡(jiǎn)單的表單驗(yàn)證練習(xí)就完成了，喜歡的點(diǎn)個(gè)贊唄！

總結(jié)

以上是生活随笔為你收集整理的简简单单的正则表单验证练习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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