表单验证实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46103538/article/details/115919518
表单验证##

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style type="text/css">
        #tin {
            margin-left: 10px;
            font-size: 12px;
        }

        #tip1 {
            width: 130px;
            height: 18px;
            /*background:#ddd;*/
            border-radius: 3px;
            margin-left: 10px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            display: inline-block;
        }

        span {
            font-size: 14px;
        }

        .pass {
            border: 1px solid green;
            box-shadow: 0 0 10px green;
        }

        .error {
            border: 1px solid red;
            box-shadow: 0 0 10px red;
        }
        input{outline: none;}
        
    </style>
</head>

<body>
        <table width="449" height="530" border="1" align="center">
            <tr>
                <td colspan="2" align="center">用户名注册</td>
            </tr>
            <tr>
                <td width="116" align="right">姓名：</td>
                <td width="323"><label>
                        <input type="text" name="" id="username" />
                    </label> <span id="tin"></span></td>
            </tr>
            <tr>
                <td align="right">年龄：</td>
                <td><label>
                        <input type="text" name="" id="age" />
                    </label> <span id="tia"></span></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><label>
                        <input type="password" name="" id="pwd" />
                    </label> <span id="tip1"></span></td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td><label>
                        <input type="password" name="" id="qpwd" />
                    </label><span id="tip2"></span></td>
            </tr>
            <tr>
                <td align="right">手机：</td>
                <td><label>
                        <input type="text" name="" id="tel" />
                    </label> <span id="tit"></span></td>
            </tr>
            <tr>
                <td align="right">QQ:</td>
                <td><label>
                        <input type="text" name="" id="qq" />
                    </label><span id="tiq"></span></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><label>
                        <input type="text" name="" id="email" />
                    </label><span id="tiem"></span></td>
                </td>
            </tr>
            <tr>
                <td align="right">邮编：</td>
                <td><label>
                        <input type="text" name="" id="eml" />
                    </label><span id="tiec"></span></td>
                </td>
            </tr>
            <tr>
                <td align="right">身份证：</td>
                <td><label>
                        <input type="text" name="" id="sname" />
                    </label><span id="tisn"></span></td>
            </tr>
            <tr>
                <td align="right">验证码：</td>
                <td><label>
                        <input type="text" id="yCode" />
                        <span style="width:80px;height: 20px;border: 1px solid red;display: inline-block;"id="sCode"></span>
                        <a href="#" id="shuaxin">看不清</a>
                    </label>
                </td>
            </tr>

            <tr>
                <td height="36" colspan="2" align="center"><label>
                        <!-- <input type="submit" value="注册"  /> -->
                    </label></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><button>提交注册</button></td>
            </tr>
        </table>
        <script>
            username.onblur=function(){
            var username = /^[\u4E00-\u9FA5A-Za-z]+$/;
            if(username.test(this.value)){
                this.className="pass"
            }
                else{
                    this.className="error"
                }
            }
            age.onblur=function(){
                var age=/^(1[89]|[2-8][0-9]|90)$/;
                if(age.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            pwd.onblur=function(){
                var pwd=/^(?=.*?[a-zA-Z])(?=.*?[0-6])[!"#$%&"()*+,\-./:;<=>?@\[\\\]^_`{|}~A-Za-z0-9]{10,16}$/
                if(pwd.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            qpwd.onblur=function(){
                var qpwd=/^(?=.*?[a-zA-Z])(?=.*?[0-6])[!"#$%&"()*+,\-./:;<=>?@\[\\\]^_`{|}~A-Za-z0-9]{10,16}$/
                if(qpwd.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            tel.onblur=function(){
                var tel=/^1[3-9]\d{9}$/
                if(tel.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            qq.onblur=function(){
                var qq=/^[1-9][0-9]{4,11}$/;  
                if(qq.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="pass"
                }
            }
            email.onblur=function(){
                var email = /^\w{1,}@[0-9A-z]+\.[A-z]{2,}$/
                if(email.test(this.value)){
				this.className = "pass";
			}
			    else{
				    this.className = "error";
			    }
            }
            eml.onblur=function(){
                var eml=/^[0-9]{6}$/
                if(eml.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            sname.onblur=function(){
                var sname=/^\d{17}[xX0-9]$/
                if(sname.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            yCode.onblur=function(){
                var yCode= /^\d{4}$/
                if(yCode.test(this.value)){
                    this.className="pass"
                }
                else{
                    this.className="error"
                }
            }
            var shuaxin = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
            "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","0","1","2","3","4","5","6","7","8","9"];
            var div = document.getElementById("#sCode");
            function getRandom(n, m) {
                n = Number(n);
                m = Number(m);
                if (n > m) {
                    var temp = n;
                    n = m;
                    m = temp;
                }                
                return Math.floor(Math.random()*(m - n) + n);
            }
            
        </script>
    </body>

</html>