Dom 表单有效性检查

最新推荐文章于 2024-04-30 08:58:14 发布
Soloensiz
最新推荐文章于 2024-04-30 08:58:14 发布
阅读量503
点赞数 2
分类专栏： web前端文章标签： dom web前端
本文链接：https://blog.csdn.net/Lu_1u/article/details/76099170
版权
web前端专栏收录该内容
10 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>注册页面</title>
    <style type="text/css">
        .grayText{
            color: gray;
        }
        #table td{
            width:40px;
            height:19px;
            background-color:#F3F3F3;
            border:1px solid #D0D0D0;
            color:#BBBBBB;
            line-height:9px;
        }

    </style>
    <script type="text/javascript">


        var accountElement ;
        var passwordElement;
        var ageElement;
        var formElement;

        //检查value是否符合邮箱格式
        function checkAccount(value){
            return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value);
        }

        window.onload=function(){

            //1 账号：默认的灰色提示文本，是否符合邮箱格式
            accountElement = document.getElementById("account");
            //默认的灰色提示文本
            accountElement.onfocus=function(){
                if(this.className=="grayText"){
                    this.className=null;
                    this.value="";
                }
            }
            accountElement.onblur=function(){
                if(!this.value){
                    this.className="grayText"
                    this.value="请使用邮箱注册";
                }
                if((!checkAccount(this.value)) && this.className!="grayText"){
                    this.style.backgroundColor="coral";
                }else if(this.className!="grayText"){
                    this.style.backgroundColor="lightgreen";
                }
            }



            //2 检查密码的强度
            passwordElement = document.getElementById("password");
            passwordElement.onkeyup=function(){
                var level = checkPasswordLevel(this.value);
                switch (level){

                    case 1:{
                        document.getElementById("td1").style.backgroundColor="coral";
                        document.getElementById("td2").style.backgroundColor=null;
                        document.getElementById("td3").style.backgroundColor=null;
                        break;
                    }
                    case 2:{
                        document.getElementById("td1").style.backgroundColor="lightgreen";
                        document.getElementById("td2").style.backgroundColor="lightgreen";
                        document.getElementById("td3").style.backgroundColor=null;
                        break;
                    }
                    case 3:{
                        document.getElementById("td1").style.backgroundColor="green";
                        document.getElementById("td2").style.backgroundColor="green";
                        document.getElementById("td3").style.backgroundColor="green";
                        break;
                    }

                }
            }


            //3 检查年龄：用户不可以输入非数字的字符，年龄需要在[0-150]之间
            ageElement = document.getElementById("age");
            ageElement.onkeydown=function(){

                if(event.keyCode<48 || event.keyCode>57){
                    if(event.keyCode==8){
                        return true;
                    }
                    return false;
                }

            }
            ageElement.onkeyup=function(){
                var result = checkAge(this.value);
                if(result){
                    this.style.backgroundColor="lightgreen";
                }else{
                    this.style.backgroundColor="coral";
                }
            }


            //4 整个表单的检查
            formElement = document.getElementById("form");
            formElement.onsubmit=function(){

                var message = "";

                //检查账号是否符合邮箱规则
                var result = checkAccount(accountElement.value);
                if(!result){
                    message += "账号不符合邮箱规则\n"
                }

                //检查密码强度
                result = checkPasswordLevel(passwordElement.value);
                if(result==1){
                    message += "密码强度太弱\n"
                }

                //检查年龄
                result = checkAge(ageElement.value);
                if(!result){
                    message += "年龄需要在[0-150]之间";
                }

                if(message){
                    alert(message);
                    return false;
                }
            }

        }

        function checkAge(value){

            if(!value){
                return false;
            }
            var age = parseInt(value);

            if(age<0 || age>150){
                return false;
            }else{
                return true;
            }
        }

        //检查密码强度  1--弱，2--中，3--强
        function checkPasswordLevel(value){
            if(!value){
                return 1;
            }
            if(value.length<6){
                return 1;
            }
            if(value.length>=8 && /[0-9]/.test(value) &&  /[a-z]/.test(value) && /[A-z]/.test(value)){
                return 3;
            }
            return 2;
        }

    </script>
</head>
<body>
<form id="form" action="register">

    <label for="account">账号：</label>
    <input id="account" class="grayText" type="text" name="account" value="请使用邮箱注册" /><br/>

    <label for="password">密码：</label>
    <input id="password" type="password" name="password" />

    <table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
      <tr align="center">
        <td id="td1">弱</td>
        <td id="td2">中</td>
        <td id="td3">强</td>
      </tr>
    </table>

    <br/>

    <label for="age">年龄：</label>
    <input id="age" type="text" name="age" /><br/>

    <label>性别：</label>
    <input type="radio"  name="gender" checked="checked" value="男"/>男
    <input type="radio"  name="gender" value="女"/>女<br/>

    <label>爱好：</label>
    <input type="checkbox" name="hobbies" value="读书" />读书
    <input type="checkbox" name="hobbies" value="音乐" />音乐
    <input type="checkbox" name="hobbies" value="跑步" />跑步
    <input type="checkbox" name="hobbies" value="旅行" />旅行<br/>

    <label>学历：</label>
    <select name="degree">
        <option value="本科">本科</option>
        <option value="中学">中学</option>
        <option value="大专">大专</option>
        <option value="研究生">研究生</option>
    </select>
    <br/>

    <input type="reset" value="重置" />
    <input type="submit" value="注册" />
</form>
</body>
</html>