JavaScript的Form常规验证写法-js教程-PHP中文网

JavaScript的Form常规验证写法
高洛峰
发布： 2016-11-25 11:39:09
原创
1215人浏览过
<html>
 <head><title>中信会员注册</title>
  <link rel="stylesheet" type="text/css" href="http://www.php.cn/"> 
   <link rel="stylesheet" type="text/css" href="http://www.php.cn/"> 
    <link rel="stylesheet" type="text/css" href="http://www.php.cn/"> 
<script language="javascript" type="text/javascript">
        
        //validateText   onfocus onblur  onchange   验证用户名
        function validateText( value ){
            
            //获取img对像  div
            var img = document.getElementById( "img" );
            var div = document.getElementById( "div" );
            
        
            if( value.length < 1 ){ //验证失败
                
                //alert( 用户名不能为空 );
                img.src = "./img/invalid.gif";
                img.style.display = ;
                
                div.innerHTML = "用户名不能为空";
                div.style.color = "red";
                
                //设置焦点
                document.csuinfo.username.focus();
                
                return false;
            }else{
            
                //alert( 用户名验证成功 ); 
                img.src = "./img/valid.gif";
                img.style.display = ;
                
                div.innerHTML = "用户名验证成功";
                div.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)"/>
                  @@##@@<!--image标签主要是为了显示成功与否的图片,div标签用于显示成功与否的提示文字-->
                  <span id="div"></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@@##@@</button>
    </td>
   </tr>
 
   <tr>
    <td>操作</td>
    <td><input type="submit" value="注册"  />
     <input type="reset" value="重置"  /></td>
   </tr>
  </table>
  </form>
 </body>
</html>
登录后复制