Home > Article > Web Front-end > Implementing form validation in JavaScript

Implementing form validation in JavaScript

一个新手Original: 2017-09-27 09:44:281452browse

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>

            var names = ["tom","jack","lily","韩梅梅"];            //表单验证
            function mySub(){

                var userName = document.forms[&#39;myForm&#39;][&#39;userName&#39;].value;                
                var pwd = document.forms[&#39;myForm&#39;][&#39;pwd&#39;].value;                var tel = document.forms[&#39;myForm&#39;][&#39;tel&#39;].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>

The above is the detailed content of Implementing form validation in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Nodejs gzip decompression base64 methodNext article：Nodejs gzip decompression base64 method

See more

Implementing form validation in JavaScript

Related articles