javascript - 用户注册页面（表单验证）

最新推荐文章于 2022-05-07 16:09:21 发布

zyljjf

最新推荐文章于 2022-05-07 16:09:21 发布

阅读量1.6w

点赞数 7

分类专栏： javascript 文章标签： javascript 表单

本文链接：https://blog.csdn.net/zyljjf/article/details/78096338

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

javascript - 用户注册页面

java


<!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>

        //表单验证](https://img-blog.csdn.net/20170926153749593?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenlsampm/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

zyljjf

关注

7
点赞
踩
60

收藏

觉得还不错? 一键收藏
0
评论
javascript - 用户注册页面（表单验证）

javascript - 用户注册页面java<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script> ![var names = \["tom","jack","lily","韩梅梅"\]; fu
复制链接

扫一扫