JavaScript的Form常規驗證寫法

<html>
 <head><title>中信會員註冊</title>
  <link rel=”stylesheet” type=”text/css” href=”./css/vbulletin.css” />
  <link rel=”stylesheet” type=”text/css” href=”./css/form.css” />
  <link rel=”stylesheet” type=”text/css” href=”./css/table.css” />
 
<script language=”javascript” type=”text/javascript”>
       
        //validateText   onfocus onblur  onchange   驗證用戶名
        function validateText( value ){
           
            //獲取img對像  p
            var img = document.getElementById( “img” );
            var p = document.getElementById( “p” );
           
       
            if( value.length < 1 ){ //驗證失敗
               
                //alert( 用戶名不能為空 );
                img.src = “./img/invalid.gif”;
                img.style.display = ;
               
                p.innerHTML = “用戶名不能為空”;
                p.style.color = “red”;
               
                //設置焦點
                document.csuinfo.username.focus();
               
                return false;
            }else{
           
                //alert( 用戶名驗證成功 );
                img.src = “./img/valid.gif”;
                img.style.display = ;
               
                p.innerHTML = “用戶名驗證成功”;
                p.style.color = “blue”;
               
                return true;
            }
       
        }
       
        //validatePassword
        function validatePassword( value ){
       
            //alert( value );
            if( value.length <4 ){
                alert(“密碼至少4位”);
            
                 //設置焦點
                document.csuinfo.password.focus();
                return false;
            }
            var pattern = /^d*$/;//數字0個或多個
            if (!pattern.test(value)) {//如是密碼不為數字就輸出
                alert(“密碼隻能為數字”);
            }
       
            return true;
        }
       
        //confirmPassword
        function confirmPassword( value ){
       
            //
            if(  value != document.csuinfo.password.value ){
           
                alert( “兩次密碼不致,請重新輸入!” );
               
                document.csuinfo.password2.focus();
                return false;
            }
       
       
            return true;
        }
       
        //validateSex
        function validateSex(){
       
            var flag = true;  
            var sex = document.getElementsByName( “sex” );
             //alert( sex.length );
            for( i = 0; i < sex.length;i++  ){
           
                //通過checked檢查哪個單選是否被選中,
                if( sex[i].checked ){
               
                    flag = false;
                   
                    break;
                }
            }
           
            if( flag ){
           
                alert( “請選擇你的性別!” );
                return false;
            }
        
            return true;
        }
       
        //validateLike
        function validateLike(){
       
            var flag = true;  
            var like = document.getElementsByName( “like” );
             //alert( like.length );
            for( i = 0; i < like.length;i++  ){
           
                //通過checked檢查哪個單選是否被選中,
                if( like[i].checked ){
               
                    flag = false;
                   
                    break;
                }
            }
           
            if( flag ){
           
                alert( “請選擇你的愛好!” );
                return false;
            }
           
            return true;
    
        }
       
        //validateSelect
        function validateSelect(){
       
            var flag = true;  //selected
           
            var s = document.csuinfo.s;
           
            //alert( s.length );
            for( i = 0; i < s.length;i++  ){
           
                //通過checked檢查哪個單選是否被選中,
                if( s[i].selected ){
               
                    flag = false;
                   
                    break;
                }
            }
           
            if( flag ){
           
                alert( “請選擇你的分會!” );
                return false;
            }
           
            return true;
       
        }
       
        //提交當前頁面的數據到目標資源處理   1:通過submit按鈕提交   在form中通過onsubmit事件調用對應的驗證方法  onsubmit=”return onsubmit2()”
        function submit2(){
       
           //alert( “ffffff” );
            if( validateLike() && validateSelect() ){//驗證成功,調用方法驗證,愛好與幫會的值是否選中
           
                return true;
            }
           
            return false;
       
        }
       
        // 2:通過button提交  當前表單的submit元素的name屬性值不能為submit
        function submit3(){
            //alert( “ffffff” );
            if( validateLike() && validateSelect()&&validateSex() ){//驗證成功
               
                //獲取當前的form對像
                var form1 = document.csuinfo;
               
                //修改form中的屬性值
                form1.action = “dynamicDoc.html”;
                form1.submit();//提交方法
               
               
                return true;
            }
           
            return false;
       
        }
       
        //JS正則表達式  /^:開始   $/:結束  d:數字  D:非數字  w:數字,字母,下劃線  W:與w相反 
        //[]:包含  {}:出現的次數  {2} 兩次   {1,2}:至少一次,最多兩次   .:任意字符
        function validateAge( value ){
       
            //alert( value );
            var pattern = /^d$/;
           
            //1:規則匹配內容
           
            var flag =  pattern.test( value );//驗證成功返回true,驗證失敗返回false
           
            flag = pattern.exec( value );//驗證成功返回對應的值,驗證失敗返回null
           
         
            //2:通過內容匹配規則
            flag = value.match( pattern );//驗證成功返回對應的值,驗證失敗返回null
           
            flag = value.search( pattern );//驗證成功返回0,驗證失敗返回-1
           
            alert( flag );
        }
       
</script>
 </head>
 <body>
 
  <form name=”csuinfo” action=”obj.html” method=”get” onSubmit=”return submit2();”>
 
  <table align=”center” border=”2″>
   <caption>中信會員註冊</caption>
   <tr>
    <td>用戶名</td>
    <td><input type=”text” name=”username” maxlength=”5″  size=”9″   onblur=”validateText(this.value)”/>
                  <img id=”img” src=”./img/valid.gif” style=”display: none” /><!–image標簽主要是為瞭顯示成功與否的圖片,p標簽用於顯示成功與否的提示文字–>
                  <span id=”p”></span>
               
                </td>
   </tr>
    <tr>
    <td>age</td>
    <td><input type=”text” name=”age” maxlength=”5″  size=”9″   onblur=”validateAge(this.value)”/>
                  
                </td>
   </tr>
   <tr>
    <td>密碼</td>
    <td><input type=”password” name=”password” onBlur=”validatePassword( this.value )” /></td>
   </tr>
   <tr>
    <td>確認密碼</td>
    <td><input type=”password” name=”password2″ onBlur=”confirmPassword( this.value )” /></td>
   </tr>
   <tr>
    <td>性別</td>
    <td>男:<input type=”radio” name=”sex” value=”1″ “/><!–name選一樣,方便以後獲取–>
        女:<input type=”radio” name=”sex” value=”0″  “/>
    </td>
   </tr>
   <tr>
    <td>愛好</td>
    <td>音樂:<input type=”checkbox” name=”like” value=”1″ /><!–name選一樣,方便以後獲取–>
        體育:<input type=”checkbox” name=”like” value=”2″  />
     遊戲:<input type=”checkbox” name=”like” value=”3″  />
    </td>
   </tr>
   <tr>
    <td>上傳頭像</td>
    <td><input type=”file” name=”file” value=111  />
    </td>
   </tr>
   <tr>
    <td>圖片按鈕</td> <!–  image  和img屬性一樣 作用和submit按鈕一樣–>
    <td><input type=”image” name=”image” alt=”提交” src=”./gif/face.gif” />
    </td>
   </tr>
   <tr>
    <td>hidden</td> 
    <td><input type=”hidden” name=”flag” value=”2″  />
    </td>
   </tr>
   <tr>
    <td>button</td>  
    <td><input type=”button” name=”b”  value=”button” onClick=”submit3();”  />
    </td>
   </tr>
   <tr>
    <td>你想參加幫會</td> 
    <td> <select name=”s” size=”3″ multiple>
      <option value=”1″>斧頭幫</option>
      <option value=”2″>丐幫</option>
      <option value=”3″>紅花會</option>
      <option value=”4″>天地會</option>
      </select>
    </td>
   </tr>
  
   <tr>
    <td>自我簡介</td> 
    <td><textarea name=”info” rows=”10″ cols=”25″>
       12345
     </textarea>
    </td>
   </tr>
   <tr>
    <td>單獨button</td> 
    <td><button type=”reset”>button2<img src=”./gif/face.gif”/></button>
    </td>
   </tr>
 
   <tr>
    <td>操作</td>
    <td><input type=”submit” value=”註冊”  />
     <input type=”reset” value=”重置”  /></td>
   </tr>
  </table>
  </form>
 </body>
</html>

You May Also Like