使用正则表达式进行注册校验

标题使用正则表达式进行注册校验

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="verifyJs.js"></script>
</head>
<body>
<table align="center">
    <tr>
        <td>
            用户名:
        </td>
        <td>
            <input type="text" id="name" onblur="on(name)"/>
            <span id="nameYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td>
            密码:
        </td>
        <td>
            <input type="password" id="pwd" onblur="on(pwd)"/>
            <span id="pwdYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td>
            确认密码:
        </td>
        <td>
            <input type="password" id="relPwd" onblur="resRelPwd()"/>
            <span id="relPwdYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td>
            邮箱:
        </td>
        <td>
            <input type="text" id="email" onblur="on(email)"/>
            <span id="emailYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td>
            手机号:
        </td>
        <td>
            <input type="text" id="phone" onblur="on(phone)"/>
            <span id="phoneYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td>
            身份证号:
        </td>
        <td>
            <input type="text" id="identity" onblur="on(identity)"/>
            <span id="identityYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td>
            地址:
        </td>
        <td>
            <input type="text" id="address" onblur="on(address)"/>
            <span id="addressYN" style="font-size: 16pt"></span>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="button" value="校验" onclick=""/>
        </td>
    </tr>
</table>
<script type="text/javascript">


    function on(a){
        switch (a) {
            case name:
                var nameRule = /^[A-Z][A-Za-z0-9_^\u4e00-\u9fa5\W]{5,19}/;
                res("name",nameRule);
                break;
            case  pwd:
                var pwdRule = /^[A-Z][A-Za-z0-9\W]{7,14}/;
                res("pwd",pwdRule);
                break;
            case email:
                var emailRule = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                res("email",emailRule);
                break;
            case phone:
                var phoneRule = /0?(13|14|15|18|17|19)[0-9]{9}/;
                res("phone",phoneRule);
                break;
            case identity:
                var identityRule= /^[1-9][0-9]{17}$|[1-9][0-9]{16}(X|x)$/;
                res("identity",identityRule);
                break;
            case address:
                var addressRule= /^[\u4e00-\u9fa5][a-z A-Z 0-9]*/;
                res("address",addressRule);
                break;
            default:
                alert("未知错误");
        }
    }


    function resRelPwd(){
        var getPwd = document.getElementById("pwd").value;
        var getRelPwd = document.getElementById("relPwd").value;
        if(getPwd == getRelPwd && getRelPwd != ""){
            document.getElementById("relPwdYN").innerHTML = "√";
            document.getElementById("relPwdYN").style.color = "green";
        }else{
            document.getElementById("relPwdYN").innerHTML = "×";
            document.getElementById("relPwdYN").style.color = "red";
        }
    }
</script>
</body>
</html>
/**
 * Created by Administrator on 2019/10/12.
 */
function res(eleId,Rule){
    var inputValue = document.getElementById(eleId).value;
    var result1 = Rule.test(inputValue.trim());
    if(result1 && inputValue != ""){
        document.getElementById(eleId+"YN").innerHTML = "√";
        document.getElementById(eleId+"YN").style.color = "green";
    }else{
        document.getElementById(eleId+"YN").innerHTML = "×";
        document.getElementById(eleId+"YN").style.color = "red";
    }
}

效果图:

使用正则表达式进行注册校验_第1张图片

你可能感兴趣的:(JavaScript篇)