正則表單聯系

第一步，布局

再練習之前，我上網查了一些網站的登陸注冊頁面，一般都是可以兼容手機端和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("填寫成功，正在提交，請稍后……")} })

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。