成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

簡(jiǎn)簡(jiǎn)單單的正則表單驗(yàn)證練習(xí)

el09xccxy / 1137人閱讀

摘要：正則表單聯(lián)系第一步，布局再練習(xí)之前，我上網(wǎng)查了一些網(wǎng)站的登陸注冊(cè)頁(yè)面，一般都是可以兼容手機(jī)端和端，所以我使用了進(jìn)行布局，正好也再次練習(xí)一下的使用。

正則表單聯(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ě)名稱(chēng)以及密碼

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è)贊唄！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84991.html

相關(guān)文章

  • 正則表達(dá)式

    摘要：本文內(nèi)容共正則表達(dá)式火拼系列正則表達(dá)式回溯法原理學(xué)習(xí)正則表達(dá)式，是需要懂點(diǎn)兒匹配原理的。正則表達(dá)式迷你書(shū)問(wèn)世了讓幫你生成和解析參數(shù)字符串最全正則表達(dá)式總結(jié)驗(yàn)證號(hào)手機(jī)號(hào)中文郵編身份證地址等是正則表達(dá)式的縮寫(xiě)，作用是對(duì)字符串執(zhí)行模式匹配。 JS 的正則表達(dá)式 正則表達(dá)式 一種幾乎可以在所有的程序設(shè)計(jì)語(yǔ)言里和所有的計(jì)算機(jī)平臺(tái)上使用的文字處理工具。它可以用來(lái)查找特定的信息（搜索），也可以用來(lái)查...

    bang590 評(píng)論0 收藏0

  • 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（四）

    摘要：使用搭建成熟可靠的后臺(tái)系統(tǒng)四完善動(dòng)態(tài)表單組件添加正則驗(yàn)證添加錯(cuò)誤提示添加正則驗(yàn)證先來(lái)設(shè)置一些錯(cuò)誤提示，以及添加正則驗(yàn)證上一章可能遺留了部分路徑錯(cuò)誤，可以自行調(diào)整郵箱格式不正確請(qǐng)選擇這里是提供的一些正則 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（四） 完善動(dòng)態(tài)表單組件 添加正則驗(yàn)證 添加錯(cuò)誤提示 添加正則驗(yàn)證 先來(lái)設(shè)置一些錯(cuò)誤提示，以及添加正則驗(yàn)證（...

    HtmlCssJs 評(píng)論0 收藏0

  • 原生js練習(xí)題---第六課

    摘要：自定義多級(jí)右鍵菜單實(shí)現(xiàn)效果自定義多級(jí)右鍵菜單第五課第六題中已經(jīng)通過(guò)事件實(shí)現(xiàn)了一級(jí)右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽 實(shí)現(xiàn)效果：6-01完美拖動(dòng) 這里沒(méi)有使用h5的拖動(dòng)，畢竟原題也是考察借助鼠標(biāo)事件實(shí)現(xiàn)自定義的拖動(dòng)，所以就借鑒了《js高級(jí)程序設(shè)計(jì)》里的自定義拖動(dòng)自己封裝了個(gè)拖動(dòng)api，當(dāng)然由于做這個(gè)系列題目使用的都是es5的語(yǔ)法，所以IE8往下就兼容不...

    tinyq 評(píng)論0 收藏0

  • JS正則表達(dá)式學(xué)習(xí)筆記1

    摘要：正則表達(dá)式作為前端學(xué)習(xí)的一個(gè)知識(shí)點(diǎn)，是每個(gè)合格的前端開(kāi)發(fā)都應(yīng)該掌握它的用法。元字符一般情況下，正則表達(dá)式的一個(gè)字符對(duì)應(yīng)字符串的一個(gè)字符。 正則表達(dá)式作為前端學(xué)習(xí)的一個(gè)知識(shí)點(diǎn)，是每個(gè)合格的前端開(kāi)發(fā)都應(yīng)該掌握它的用法。正則表達(dá)式的學(xué)習(xí)確實(shí)不難，語(yǔ)法和應(yīng)用也非常簡(jiǎn)單，能夠快速入門(mén)，很輕松的就能寫(xiě)出簡(jiǎn)單的表達(dá)式來(lái)對(duì)字符串執(zhí)行某些操作。網(wǎng)上也有標(biāo)題黨說(shuō)一杯咖啡的時(shí)間就能學(xué)會(huì)。能學(xué)會(huì)嗎？能！但要真...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<