js实例——正则表单验证

作者: blank的小粉er | 来源:发表于2017-07-20 10:35 被阅读0次

js实例——正则表单验证
基于jQuery的表单验证插件
js表单正则验证
表单验证与回填以及表单常见bug解决方法
正则初解
element-ui 的表单使用正则验证
JavaScript 表单
Laravel使用表单请求验证
正则判断邮箱格式是否正确
正则表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{
            width:400px;
            height:40px;
            line-height: 40px;
            font-size: 16px;
            border:1px solid #ccc;
        }
        input[type='submit']{
            background: #f5f5f5;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <h1>注册</h1>
    <hr>

    <form action="1.php" name="myform" onSubmit="return demo()">
        
        <table>
            
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" id="" onblur="checkUser()"></td>
                <td id="username_info"></td>
            </tr>

            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" id="" onblur="checkEmail()"></td>
                <td id="email_info"></td>
            </tr>

            <tr>
                <td>密码:</td>
                <td><input type="password" name="pwd" id="" onblur="checkPwd()"></td>
                <td id="pwd_info"></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repwd" id="" onblur="checkRepwd()"></td>
                <td id="repwd_info"></td>
            </tr>

            <tr>
                <td></td>
                <td><input type="submit" value="提 交"></td>
                <td></td>
            </tr>
        </table>
    </form>


    <script>

        //验证用户名
        function checkUser(){
            //获取输入框的值
            var value = document.myform.username.value;
            //获取td
            var td = document.getElementById('username_info');

            //判断验证  6-12位的数字\字母下划线
            if (value.search(/^\w{6,12}$/) === -1) {
                td.innerHTML = "用户名必须是6-12位的数字 字母 下划线";
                td.style.color = "red";
                return false;
            }
            td.innerHTML = "用户名可用";
            td.style.color = "green";
            return true;
        }


        //验证邮箱
        function checkEmail(){
            //获取输入框的值
            var value = document.myform.email.value;
            //获取td
            var td = document.getElementById('email_info');

            //判断验证  邮箱
            if (value.search(/^\w+@\w+(\.\w+){1,3}$/) === -1) {
                td.innerHTML = "邮箱格式不正确";
                td.style.color = "red";
                return false;
            }
            td.innerHTML = "邮箱可用";
            td.style.color = "green";
            return true;
        }


        //验证密码
        function checkPwd(){
            //获取密码
            var pwd = document.myform.pwd.value;
            var td = document.getElementById('pwd_info');

            //验证
            if (pwd.length < 6 || pwd.length > 18) {
                td.innerHTML = "密码的长度必须是6-18位";
                td.style.color = "red";
                return false;
            }
            td.innerHTML = "密码可用";
            td.style.color = "green";
            return true;
        }


        //验证确认密码
        function checkRepwd(){
            //获取密码
            var pwd = document.myform.pwd.value;
            var repwd = document.myform.repwd.value;
            var td = document.getElementById('repwd_info');

            //验证
            if (pwd != repwd) {
                td.innerHTML = "两次密码不一致";
                td.style.color = "red";
                return false;
            } 

            td.innerHTML = "确认密码正确";
            td.style.color = "green";
            return true;
            
        }

        function demo(){

            return checkRepwd() && checkPwd() && checkEmail() && checkUser();
        }


    </script>
</body>
</html>