表单验证---用户注册

来源：互联网发布：华莱士知乎编辑：程序博客网时间：2024/05/16 08:32
用户注册

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script>            var names = ["tom","jack","lily","韩梅梅"];            //表单验证            function mySub(){                var userName = document.forms['myForm']['userName'].value;                var pwd = document.forms['myForm']['pwd'].value;                var tel = document.forms['myForm']['tel'].value;                if(userName.length<3 || userName.length>6){                    alert("用户名必须为3-6位");                    return false;                }                //判断用户名是否可用，面向对象的编程思想，原则：高内聚、低耦合                var b = isName(userName);                if(b){                    document.getElementById("isCan").innerHTML = "用户名已存在";                    return false;                }else{                    document.getElementById("isCan").innerHTML = "";                }                //判断用户名是否重复，面向过程//              for(var i=0;i<names.length;i++){//                  var n = names[i];//                  if(n == userName){//                      alert("用户名已存在");//                      return false;//                  }//              }                if(pwd.length<6){                    alert("密码必须大于6位");                    return false;                }                return true;            }            //判断用户名，参数为判断的用户名            function isName(str){                for(var i=0;i<names.length;i++){                    if(names[i] == str){                        return true;                    }                }                return false;            }        </script>    </head>    <body >        <h1>用户注册</h1>        <span>规则：用户名长度为3-6个字符</span>        <hr />        <form name="myForm" action="a.html" method="get" onsubmit="return mySub()">            <p>                用户名：<input name="userName" type="text" /><span id="isCan" style="color: red;"></span>            </p>            <p>                密码：<input name="pwd" type="password" />            </p>            <p>                电话：<input name="tel" type="text" />            </p>            <p>                <input type="submit" />            </p>        </form>    </body></html>
阅读全文
0 0