JS正则表达式验证登录表单

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Mr_hanghang/article/details/102731787

使用正则表达式判断登录是否符合格式

效果图如下：

如图，使用正确的格式会报正确，格式不符合则报错误
下面是代码

HMTL代码

<div>用户名：<input type="text" id="userName"/><span id="userNameReg"></span></div>
<div>密码：<input type="password" id="pwd" /><span id="pwdReg"></span></div>
<div>确认密码：<input type="password" id="affirmPwd" /><span id="affirmPwdReg"></span></div>
<div>邮箱：<input type="text" id="mailbox" /><span id="mailboxReg"></span></div>
<div>手机号：<input type="text" id="cellphone" /><span id="cellphoneReg"></span></div>
<div>身份证号：<input type="text" id="identityCard" /><span id="identityCardReg"></span></div>
<div>地址：<input type="text" id="address" /><span id="addressReg"></span></div>
<div><input type="button" value="校验" onclick="regBtnClick()"/></div>

JS代码

    function regBtnClick(){
        reg("userName",/^[A-Z]{1}[A-Za-z_]{5,19}$/);
        reg("pwd",/^[A-Z]{1}[A-Za-z0-9]{7,14}/);
        reg("affirmPwd",/^[A-Z]{1}[A-Za-z0-9]{7,14}/);
        reg("mailbox",/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/);
        reg("cellphone",/0?(13|14|15|18|17|19)[0-9]{9}/);
        reg("identityCard",/^[1-9]{1}[0-9]{17}$|[1-9]{1}[0-9]{16}(X|x)$/);
        reg("address",/^[\u4E00-\u9FA5][\u4e00-\u9fa5-A-z0-9]+$/);
    }

导入 yanzheng.js

function reg(eleId,rule){
    var str =document.getElementById(eleId).value;
    var verify1=rule;
    var result1=verify1.test(str.trim());
    if(result1 && str!=""){
        document.getElementById(eleId+"Reg").innerHTML = "正确";
        document.getElementById(eleId+"Reg").style.color = "green";
    }else{
        document.getElementById(eleId+"Reg").innerHTML = "你输入的格式有错误";
        document.getElementById(eleId+"Reg").style.color = "red";
    }
}

以上就是使用正则表达式验证登录信息，如有不好，请评论补充