当前位置：首页 > 代码实例 > html5 css3代码分类 > jQuery > jQuery表单验证代码实例

jQuery表单验证代码实例

 2020-04-13 20:59:20 
表单验证复杂程度是不同的，代码的复杂程度也有所不同，下面是一个比较简单的表单验证代码，对一些比较简单的需求还是比较实用的，代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#myform").submit(function(){ 
    var username=$("#name").val(); 
    var age=$("#age").val(); 
    var sex=$("input[name ='sex'][checked]").val(); 
    var address=$("#add option[selected]").val(); 
    var size=$("input[name='checkbox'][checked]").size(); 
    var favouriteArray=Array(size); 
    $("input[name='checkbox'][checked]").each(function(index,docEl){ 
      favouriteArray[index]=$(this).val();// or docEl.value 
    }); 
    if(username=="") { 
      alert("性名不能为空！"); 
      $("#name").focus(); 
      return false; 
    } 
    if(age=="") { 
      alert("年龄不能为空"); 
      $("#age").focus(); 
      return false; 
    } 
    if(size==0) { 
      alert("您还没有选择爱好哦！"); 
      $("input[name='checkbox']").get(0).focus(); 
      return false; 
    } 
    for(var i=0;i<favouriteArray.length;i++){ 
      alert(favouriteArray<i>); 
    } 
    alert('提交成功！'); 
  })
})
</script>
</head>
<body>
<form action="" method="post" id ="myform">
  <table>
    <tr>
      <td>姓名：</td>
      <td><input type ="text" id = "name" name ="name"></td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td><input type ="text" id="age" name ="age"></td>
    </tr>
    <tr>
      <td>性别:</td>
      <td><input type = "radio" id="sex_man" name="sex" value="男">
        男
        <input type = "radio" id="sex_woman" name="sex" value = "女" checked ="checked">
        女</td>
    </tr>
    <tr>
      <td>地址：</td>
      <td><select id = "add">
          <option values="北京">北京</option>
          <option values="河南">河北</option>
          <option values="河南">河南</option>
        </select></td>
    </tr>
    <tr>
      <td>爱好:</td>
      <td><input type ="checkbox" id = "cbOnTheInternet" name="checkbox" value ="上网" checked="checked">
        上网
        <input type ="checkbox" id = "cbJuketing" name="checkbox" value="旅游">
        旅游
        <input type ="checkbox" id = "cbWatchingTv" name="checkbox" value="看电影">
        看电影 </td>
    </tr>
    <tr>
      <td><input type ="submit" value="提交"></td>
    </tr>
  </table>
</form>
</body>
</html>

            
            

                        
                        
                        
                        
                        
                        
             
            
            
            
            
            

            

                
代码描述：jQuery表单验证。jQuery表单验证代码实例

            

          

          

          
  
          
 下载全部 收藏 

          
  165    220  

          

          

          

                

      

      
      

        
用户评论

        

            

                
                                 

                  大牛，别默默的看了，快登录帮我点评一下吧！:)     
                  登录 | 
                  注册
                  

                                
                
                

                  
                

                
            

 			

			 
            
        

      

    

    

      

        

          

            
  522688 
              

                
                

                  
                

              

            

                         
            关注 
             
             
             
            

          
 TA的相关作品 >>更多 

          

            
          

                  

      

            

        
相关标签代码

        

          
        

      

  










 
   
   
   
   




    

        

            

            

                

                    

                        
                        

                            
XXX市XXXX区XXXXXXXXXX路0000号0000室

                            
753511799

                            
000-00000000

                        

                    

                

                

                    

                        关于我们
                        公司介绍
                        免费声明
                        用户条款
                        联系方式
                    

                

                

                    

                        网站地图
                        总站地图
                        内容地图
                        词库地图
                    

                

                

                

                    

                        战略合作
                        

                        暂无图片
                        暂无图片
                        

                    

                

            

        

    

    

        

            

                

                    

                        
Powered by 51qianduan 2.4.1 . Copyright ©  2015 - 2020 51前端  。 辽ICP备20007965号-3  。 Processed in 0.001879 second(s)

                    

                

                

                    
                

            

        

    
















	×
	

		
		
		

			
				
				QQ登录
			
			
				
				微信登录
			
			
				
				新浪登录
			

		

        
		
	

	






	×
	

	
51前端

	

		

		
注册

	

	

		
			
			QQ注册
		
		
			
			微信注册
		
		
			
			新浪注册
		

	

        
    
    

	





	×
	

	
绑定手机

	

		

        
请绑定手机号，在继续操作

	

		

		  

          
          

          

          
              

                

              

          
           

           

           
           
           
           
           
           
       

          

          
          

          
		  
          
          

		

        
    






	×
	

	
单次下载支付

	

		

	

		

		
应付金额：279元

        
支付完成后，回到下载页面，在进行下载

        

        

        

          
          
          
        

        
        支付宝支付
        
        
使用微信扫码付款

        


    	

        

          
          
          
        

        
        微信支付
        
        
使用微信扫码付款

        

		

		

    









  
 

  
官方QQ群

  
意见反馈

  
  

    
 qq群
      
扫描上面二维码加微信群

    

      

  

    

      
 官方QQ群 

      

      

        
jQuery/js讨论群

          群号：642649996

        
Css3+Html5讨论群

          群号：322131262

      

      
加群请备注：从官网了解到