表單驗證與正則表達式

問題:一個註冊界面,包括用戶名、密碼、確認密碼、郵箱,對其進行表單驗證,要求:
各項都不能爲空,
用戶名由字母數字下劃線組成,不能使用數字開頭,
密碼長度必須大於6位,但不能超過15位,
密碼和確認密碼內容需要相同,
郵箱必須符合郵箱的規則

<html>
    <body>
        <form>
            <div>
                用戶名:<input type="text" name="username" id="username" />
            </div>
            <div>
                密碼:<input type="password" name="password" id="password" onClick="ckpassword()"/>
            </div>
            <div>
                確認密碼:<input type="password" name="secondpwd" id="secondpwd" onClick="cksecondpwd()"/>
            </div>
            <div>
                郵箱:<input type="text" name="email" id="email" onClick="ckemail()"/>
            </div>
            <div>
                <input type="button" value="提交" onClick="mysubmit()"/>
            </div>
        </form>
    </body>
    <script type="text/javascript">
        function ckpassword(){
            var username=document.getElementById("username").value;
            if(username==""){
                alert("用戶名不能爲空!");
                return false;
            }else{
                var reg=/\d/;
                var reg2=/[a-zA-Z0-9_]/;
                if(reg.test(username.substring(0))){
                    alert("用戶名不能以數字開頭!");
                    return false;
                }else{
                    if(!reg2.test(username)){
                        alert("用戶名應該由字母數字下劃線組成");
                        return false;
                    }
                }
            }
            
        };
        function cksecondpwd(){
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            if(username==""){
                alert("用戶名不能爲空!");
                return false;
            }else if(password==""){
                alert("密碼不能爲空!");
                return false;
            }else{
                if(!(password.length>6)){
                    alert("密碼長度必須大於6位!");
                    false;
                }else if(!(password.length<=15)){
                    alert("密碼長度不能超過15位!");
                    false;
                }
            }
        };
        function ckemail(){
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            var secondpwd=document.getElementById("secondpwd").value;
            if(username==""){
                alert("用戶名不能爲空!");
                return false;
            }else if(password==""){
                alert("密碼不能爲空!");
                return false;
            }else if(secondpwd==""){
                alert("確認密碼不能爲空!");
                return false;
            }else{
                if(!(password==secondpwd)){
                    alert("密碼和確認密碼內容需要相同!");
                    return false;
                }
            }
        };
        function mysubmit(){
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            var secondpwd=document.getElementById("secondpwd").value;
            var email=document.getElementById("email").value;
            if(username==""){
                alert("用戶名不能爲空!");
                return false;
            }else if(password==""){
                alert("密碼不能爲空!");
                return false;
            }else if(secondpwd==""){
                alert("確認密碼不能爲空!");
                return false;
            }else if(email==""){
                alert("郵箱不能爲空!");
                return false;
            }else{
                var reg=new RegExp(/([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);
                if(!reg.test(email)){
                    alert("郵箱必須符合郵箱的規則!");
                    return false;
                }
                alert("提交成功");
            }
        }
    
    </script>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章