javascript正则实现表单验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <center>
        <h2>欢迎注册学生信息</h2>
        <form action="insert.php" method="post" onsubmit="return sub1()">
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" name="username" id="username" onblur="fun1()">
                    <span id="s1"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="pwd" id="pwd" onblur="fun2()">
                    <span id="s2"></span>
                </td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td>
                    <input type="password" name="pwd_r" id="pwd_r" onblur="fun3()">
                    <span id="s3"></span>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                    <span id="s4"></span>
                </td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td>
                    <input type="text" name="email" id="email" onblur="fun5()">
                    <span id="s5"></span>
                </td>
            </tr>
            <tr>
                <td>城市</td>
                <td>
                    <select name="city">
                        <option>---请选择---</option>
                        <option>---北京---</option>
                        <option>---上海---</option>
                        <option>---深圳---</option>
                        <option>---广州---</option>
                        <option>---浙江---</option>
                    </select>
                    <span id="s6"></span>
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" name="phone" id="phone" onblur="fun7()">
                    <span id="s7"></span>
                </td>
            </tr>
            <tr>
                <td>座机号</td>
                <td>
                    <input type="text" name="tel" id="tel" onblur="fun8()">
                    <span id="s8"></span>
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td>
                    <input type="text" name="card" id="card" onblur="fun9()">
                    <span id="s9"></span>
                </td>
            </tr>
            <tr>
                <td>QQ号</td>
                <td>
                    <input type="text" name="qq" id="qq" onblur="fun10()">
                    <span id="s10"></span>
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea name="desc" id="desc" onblur="fun11()"></textarea>
                    <span id="s11"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" name="sub" id="sub">
                    <input type="reset" name="res" id="res">
                </td>
            </tr>
        </table>
    </form>
    </center>

    <script>
        function sub1(){
            if(fun1() && fun2() && fun3() && fun4() && fun5() && fun6() && fun7() && fun8() && fun9() && fun10() && fun11()){
                return true;
            }else{
                return false;
            }
        }


        function fun1(){
            var reg = /^[a-zA-Z]\w{4,9}$/;
            var username = document.getElementById('username').value;
            if(username==''){
                document.getElementById('s1').innerHTML = "不能为空";
                return false;
            }else{
                if(reg.test(username)){
                    document.getElementById('s1').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s1').innerHTML = "必须是5到10位数，不能是数字开头";
                    return false;
                }
            }
        }


        function fun2(){
            var pwd = document.getElementById('pwd').value;
            var reg = /^\w{6,}$/;
            if(pwd==''){
                document.getElementById('s2').innerHTML = "密码不能为空";
                return false;
            }else{
                if(reg.test(pwd)){
                    document.getElementById('s2').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s2').innerHTML = "密码必须大于6位数";
                    return false;
                }
            }
        }

        function fun3(){
            var pwd_r = document.getElementById('pwd_r').value;
            var pwd = document.getElementById('pwd').value;
            if(pwd == pwd_r){
                document.getElementById('s3').innerHTML = "通过";
                return true;
            }else{
                document.getElementById('s3').innerHTML = "密码不一致";
                return false;
            }
        }

        function fun4(){
            var sex = document.getElementsByName('sex');
            if(sex[0]['checked'] || sex[1]['checked']){
                document.getElementById('s4').innerHTML = "通过";
                    return true;
            }else{
                document.getElementById('s4').innerHTML = "必须选择一项";
                    return false;
            }
        }

        function fun5() {
            var reg = /^\w+@+\w{2,4}(\.)(?:com|cn|net)$/;
            var em = document.getElementById('email').value;
            if(em==''){
                document.getElementById('s5').innerHTML = "邮箱不能为空";
                return false;
            }else{
                if(reg.test(em)){
                    document.getElementById('s5').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s5').innerHTML = "邮箱必须包含@符号，以.com、.cn或者.net结尾";
                    return false;
                    
                }
            }
        }

        function fun6(){
            var city = document.getElementsByName('city');
            var c = city[0];
            if(c[1].selected == true || c[2].selected == true || c[3].selected == true || c[4].selected == true || c[5].selected == true){
                document.getElementById('s6').innerHTML = "通过";
                return true;
            }else{
                document.getElementById('s6').innerHTML = "必须选择一项";
                return false;
            }
        }

        function fun7(){
            var reg = /^1(?:5|8|3)\d{9}$/;
            var phone = document.getElementById('phone').value;
            if(phone==''){
                document.getElementById('s7').innerHTML = "手机号码不能为空";
                return false;
            }else{
                if(reg.test(phone)){
                    document.getElementById('s7').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s7').innerHTML = "必须是11位数字，并且是以15、18、13开头";
                    return false;
                }
            }
        }


        function fun8(){
            var reg = /^\d{3}(\-)\d{8}$/;
            var tel = document.getElementById('tel').value;
            if(tel==''){
                document.getElementById('s8').innerHTML = "座机号不能为空";
                return false;
            }else{
                if(reg.test(tel)){
                    document.getElementById('s8').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s8').innerHTML = "必须是010-66666666这种格式，前面是3位数的区号，后面是8位数的电话号，中间是-";
                    return false;
                }
            }
        }

        function fun9(){
            var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            var card = document.getElementById('card').value;
            if(card == ''){
                document.getElementById('s9').innerHTML = "身份证号不能为空";
                return false;
            }else{
                if(reg.test(card)){
                    document.getElementById('s9').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s9').innerHTML = "必须是15或者18位数字组成，18位的最后一位可以是X";
                    return false;
                }
            }
        }


        function fun10(){
            var reg = /^\d{8,11}$/;
            var qq = document.getElementById('qq').value;
            if(qq==''){
                document.getElementById('s10').innerHTML = "QQ不能为空";
                return false;
            }else{
                if(reg.test(qq)){
                    document.getElementById('s10').innerHTML = "通过";
                    return true;
                }else{
                    document.getElementById('s10').innerHTML = "QQ必须是8-11位数字组成";
                    return false;
                }
            }
        }


        function fun11() {
            var reg = /^[\u4e00-\u9fa5]{1,20}$/
            var desc = document.getElementById('desc').value;
            if(reg.test(desc)){
                document.getElementById('s11').innerHTML = "通过";
                return true;
            }else{
                document.getElementById('s11').innerHTML = "必须是中文，且在20个字符以内";
                return false;
            }
        }
    </script>
</body>
</html>
表单效果：
javascript正则实现表单验证

猜你喜欢
