簡簡單單的正則表單驗證練習

el09xccxy 發布于2019-08-20 18:59 / 1130人閱讀

摘要：正則表單聯系第一步，布局再練習之前，我上網查了一些網站的登陸注冊頁面，一般都是可以兼容手機端和端，所以我使用了進行布局，正好也再次練習一下的使用。

正則表單聯系 第一步，布局

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

話不多說，直接上圖：

第二步，書寫表單驗證js 首先，我們需要練習正則表達式

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

我們大家都知道，郵箱必須有一個@符號，然后還有一個.,最后跟著一個域名，所以我們需要這樣書寫：

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

然后需要書寫名稱以及密碼

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

弱密碼是6個以上的數字字母不包括漢字：

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

強密碼(必須包含大小寫字母和數字的組合，不能使用特殊字符和漢字，長度在6個以上)：

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

然后我們就需要書寫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("強");
        }
    }
}
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 = "郵箱格式錯誤"
    falg1=ab($(this),emlReg,text)
})
$("#btn2").blur(function(){
    var text = "用戶名格式錯誤，請輸入至少2個漢字"
    falg2=ab($(this),nameReg,text)
})
$("#btn3").blur(function(){
    var text = "密碼格式錯誤，請輸入至少6個英文或數字"
    falg3=ab($(this),pwReg1,text)
})

$("#zhuce").click(function(){
    $("#btn1").blur()
    $("#btn2").blur()
    $("#btn3").blur()
    if(falg1&&falg2&&falg3){
        alert("填寫成功，正在提交，請稍后……")
    }
})

這樣，一個簡單的表單驗證練習就完成了，喜歡的點個贊唄！

GPU云服務器云服務器正則練習器 php的正則驗證 php的正則驗證網址 js中驗證日期的正則

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84991.html

正則表達式

摘要：本文內容共正則表達式火拼系列正則表達式回溯法原理學習正則表達式，是需要懂點兒匹配原理的。正則表達式迷你書問世了讓幫你生成和解析參數字符串最全正則表達式總結驗證號手機號中文郵編身份證地址等是正則表達式的縮寫，作用是對字符串執行模式匹配。 JS 的正則表達式正則表達式一種幾乎可以在所有的程序設計語言里和所有的計算機平臺上使用的文字處理工具。它可以用來查找特定的信息（搜索），也可以用來查...

bang590 2019-08-22 13:59 評論0 收藏0
使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin（四）

摘要：使用搭建成熟可靠的后臺系統四完善動態表單組件添加正則驗證添加錯誤提示添加正則驗證先來設置一些錯誤提示，以及添加正則驗證上一章可能遺留了部分路徑錯誤，可以自行調整郵箱格式不正確請選擇這里是提供的一些正則使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin（四）完善動態表單組件添加正則驗證添加錯誤提示添加正則驗證先來設置一些錯誤提示，以及添加正則驗證（...

HtmlCssJs 2019-08-21 18:35 評論0 收藏0
原生js練習題---第六課

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

tinyq 2019-08-19 18:17 評論0 收藏0
JS正則表達式學習筆記1

摘要：正則表達式作為前端學習的一個知識點，是每個合格的前端開發都應該掌握它的用法。元字符一般情況下，正則表達式的一個字符對應字符串的一個字符。正則表達式作為前端學習的一個知識點，是每個合格的前端開發都應該掌握它的用法。正則表達式的學習確實不難，語法和應用也非常簡單，能夠快速入門，很輕松的就能寫出簡單的表達式來對字符串執行某些操作。網上也有標題黨說一杯咖啡的時間就能學會。能學會嗎？能！但要真...

wangdai 2019-08-26 10:12 評論0 收藏0