집 > 기사 > 웹 프론트엔드 > JavaScript로 양식 유효성 검사 구현

JavaScript로 양식 유효성 검사 구현

一个新手원래의: 2017-09-27 09:44:281468검색

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

위 내용은 JavaScript로 양식 유효성 검사 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Nodejs gzip 압축 해제 base64 방법다음 기사：Nodejs gzip 압축 해제 base64 방법