JS-表單驗證

敢於衝撞命運纔是天才。 —— 雨果

先看一下最後的效果。

我們首先完成表單部分

<body>
        <form action="" name="form1"  onsubmit="return fun1();"   >
            <table border="1" width="30%" >
                <tr>
                    <th colspan="2" align="center" >
                        用戶註冊
                    </th>
                </tr>   
                <tr>
                    <td>用戶名:</td>
                    <td><input type="text" name="name"  onblur="checkName();" /><font color="red" ></font></td>
                </tr>
                <tr>
                    <td>郵箱:</td>
                    <td><input type="text" name="email" /><font color="red" ></font></td>
                </tr>     
                <tr>
                    <td colspan="2" align="center" >
                        <input type="submit" value="提交" />
                    </td>
                </tr>               
            </table>
        </form>
  </body>

下面是驗證的邏輯以及代碼

<script type="text/javascript">
        //如果校驗不符合規則,攔截表單的提交
            //1 用戶名不能爲空,並且長度在6到10位之間.只能以英文字母開頭. 用戶名中只能使用"_"符號.
            function fun1(){
                var flag = true;

                if(!checkEmail()){
                flag =  false;
                }

                if(!checkName()){
                flag =  false;
                }
                 alert(flag);
                 return flag;
            }
            //驗證郵箱
            function checkEmail(){
            //1 獲得用戶輸入的郵箱
                var email  = document.form1.email.value;
            //2 定義正則
                var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
            //3 校驗
            if(!reg.test(email)){
                //失敗=>提示,並返回false
                addError(document.form1.email,"郵箱不符合規則!");
                    return false;//攔截表單提交
            }else{
                removeError(document.form1.email);
                return true;
            }

            }
            //驗證用戶名
            function checkName(){
            //1 獲得文本輸入框中的內容
                    //var nameInput=    document.getElementsByName("name")[0];
                    var nameInput = document.form1.name;

                    //var name = nameInput.getAttribute("value");
                    var name = nameInput.value;  //DHTML屬性 
                //2 定義正則表達式對象
                var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
                //3 校驗
                if(!reg.test(name)){
                    //校驗失敗=> 提示用戶. 
                    //alert("用戶需要6到10位,不能以數字開頭!");
                    addError(nameInput,"用戶需要6到10位,不能以數字開頭!");
                    return false;//攔截表單提交
                }else{
                    //驗證成功=>清除錯誤信息
                    removeError(nameInput);
                    return true;
                }
                }
                //添加錯誤
                //參數1 : 標識往那裏添加
                //參數2 : 錯誤信息是什麼
                function addError(where,what){
                        where.nextSibling.innerHTML=what;
                }
                //清除錯誤
                function removeError(where){
                    where.nextSibling.innerHTML="";
                }
        </script>