简简单单的正则表单验证练习

正则表单联系

第一步，布局

再练习之前，我上网查了一些网站的登陆注册页面，一般都是可以兼容手机端和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("填写成功，正在提交，请稍后……")
    }
})

这样，一个简单的表单验证练习就完成了，喜欢的点个赞呗！