jquery validation表单验证，自定义字段验证

最新推荐文章于 2021-06-25 17:30:25 发布
最新推荐文章于 2021-06-25 17:30:25 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 前端技术 文章标签： jquery validation表单验证 自定义字段验证 jquery validation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yanci_/article/details/77193684
版权

首先导入三个js支持

		<script src='/resources/assets/js/jquery.js'></script>
<!-- jquery validation -->
		<script type="text/javascript" src="/resources/js/jquery.validate.min.js"></script>
	
<!-- 中文支持 -->
 <script type="text/javascript" src="/resources/js/messages_zh.min.js"></script>









js代码





<script type="text/javascript">
			/* 验证通过之后回调方法 */
			$.validator.setDefaults({
			    submitHandler: function() {
			    	alert("添加成功！");
			      	/* 提交表单的方法 */
			      	MAR.ajaxSubmitForm('/market/souMarket',$('#submitForm').serialize(),'POST','/market/marketIndex')
			    }
			});
			$(function(){
				/* 自定义手机号码验证  */
				$.validator.addMethod("isMobile", function(value, element) {  
				    var length = value.length;  
				    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
				    return this.optional(element) || (length == 11 && mobile.test(value));  
				}, "*请正确填写您的手机号码"); 
				/* 点击a标签提交表单 ，触发验证，可以换成按钮触发，或者表单的submit按钮*/
				$('#btn-submit').click(function(){
					$('#submitForm').submit();
					
				});
				/* 提交后验证提交表单 */
				$('#submitForm').validate({
					onsubmit: true,//提交表单时验证
					onfocusout:false,// 是否在失去焦点时验证
　					onkeyup :false,// 是否在敲击键盘时验证
					/* 验证规则 */
					rules:{
						marketName:"required",
						marketType:"required",
						address:"required",  
						zipcode:"required",     
						principal:"required",  
						linkMan:"required",  
						phone : {  
				            required : true,  
				            minlength : 11,  
				            isMobile : true  
				        },  
						email:{
							email:true,
						},    
					
					},
					messages: {
						marketName:'*请输入市场名称',
						marketType:"*请输入市场类型",
						address:"*请输入地址",  
						zipcode:"*请输入邮编",     
						principal:"*请输入负责人",  
						linkMan:"*请输入联系人",  
						phone :"*请正确填写您的手机号码",
						email:"*请输入有效的电子邮件地址",
					},
				});
				
				
			
			});
			
		
		</script>
样式（将错误提示更改为红色）





		<style>
			.error{
				color:red;
			}
		</style>
表单
									<form id="submitForm" class="form-horizontal">
										<input type="hidden" name="id" id="id" value="<#if entity??>${entity.id?c!''}</#if>"/>
										<div class="form-group">
											<label style="text-align: right;" class="control-label col-sm-4 col-xs-6 no-padding-right">
												<span class="red">*</span>市场名称
											</label>
											<div class=" col-sm-8 col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="marketName" id="marketName" value="<#if entity??>${entity.marketName!''}</#if>" placeholder="市场名称"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="control-label col-sm-4  col-xs-6 no-padding-right">
												<span class="red">*</span>市场类型
											</label>
											<div class="col-sm-8 col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="marketType" id="marketType" value="<#if entity??>${entity.marketType!''}</#if>" placeholder="市场类型"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>地址
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="address" id="address" value="<#if entity??>${entity.address!''}</#if>" placeholder="地址"/> 
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>邮编
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="zipcode" id="zipcode" value="<#if entity??>${entity.zipcode!''}</#if>" placeholder="邮编"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>营业面积
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="businessArea" id="businessArea" value="<#if entity??>${entity.businessArea!''}</#if>" placeholder="营业面积"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>占地面积
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="zhandiArea" id="zhandiArea" value="<#if entity??>${entity.businessArea!''}</#if>" placeholder="占地面积"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>负责人
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="principal" id="principal" value="<#if entity??>${entity.principal!''}</#if>" placeholder="负责人"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>联系人
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="linkMan" id="linkMan" value="<#if entity??>${entity.linkMan!''}</#if>" placeholder="联系人"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right">
												<span class="red">*</span>联系电话
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="phone" id="phone" value="<#if entity??>${entity.phone!''}</#if>" placeholder="联系电话"/> 
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>邮箱
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="email" id="email" value="<#if entity??>${entity.email!''}</#if>" placeholder="邮箱"/> 
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>所在地类型
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="locationType" id="locationType" value="<#if entity??>${entity.locationType!''}</#if>" placeholder="所在地类型"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right">
												<span class="red">*</span>备注
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
												   <textarea class="col-sm-4 col-xs-8" id="form-field-8"  class="col-sm-4  col-xs-6" name="remark" id="remark"  placeholder="备注"><#if entity??>${entity.remark!''}</#if></textarea>
												</div>
											</div>
										</div>
										<div class="clearfix form-actions">
											<div class="col-md-offset-4 col-md-9">
												<a href="/market/marketIndex" class="btn">
													<i class="ace-icon fa fa-undo bigger-110"></i>
													返回
												</a>
												     
												<!-- <a href="javascript:MAR.ajaxSubmitForm('/market/souMarket',$('#submitForm').serialize(),'POST','/market/marketIndex')" class="btn btn-info">
													<i class="ace-icon fa fa-check bigger-110"></i> -->
												<a href="javascript:void(0)" class="btn btn-info" id="btn-submit">
													<i class="ace-icon fa fa-check bigger-110"></i>
													提交
												</a>
											</div>
										</div>
									</form>


























                

        

        

    

  


    

      

        

            

              
                
                  Yanch_
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jQuery Validate表单验证实例

				
			

			

				

					05-26
				

			

		

		

			
				
实例是用jQuery的validate插件做的登陆表单的验证，效果还不错，代码部分可以参见我写的这篇博客：http://blog.csdn.net/eson_15/article/details/51497533

			
		

	



                

              
                



	

		

			

				
					
jquery validation验证表单插件

				
			

			

				

					10-20
				

			

		

		

			
				
jQuery Validation插件是一款广泛应用于Web开发中的JavaScript插件，它主要用于验证表单输入数据的合法性，提高用户体验，减少服务器端的数据验证压力。以下是关于jQuery Validation插件的重要知识点：  1. 引入...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery插件Validation表单验证

				
			

			

				

					ardo_pass的博客
				

				

					12-16
					
					674
					
				

			

		

		

			
				
功能
1.对”姓名“的必填和长度至少是两位的验证。
2.对“电子邮件”的必填和是否为E-mail格式的验证。
3.对“网址”是否为url的验证。
4.对”你的评论“是否必填验证。

结果图



例子




[html] view
 plain copy






>  
html xmlns="http://www.w3.org/1999/xh

			
		

	





	

		

			

				
					
JQuery-validate表单验证

				
			

			

				

					CSDNY_88的博客
				

				

					06-25
					
					623
					
				

			

		

		

			
				
使用场景
注册、修改密码、收集用户数据等
自定义JQuery-validate验证方法
jQuery.validator.addMethod(name,method,message)
参数 name 是添加的方法的名字。
参数 method 是一个函数，接收三个参数 (value,element,param) ；value 是元素的值，element 是元素本身，param 是方法的参数。
参数 message是提示信息
提交表单调用校验方法
$("#registForm").valid()
示例代码
&l

			
		

	



		

			
		



	

		

			

				
					
[JQuery] - 用validate插件校验表单

				
			

			

				

					零点笔记
				

				

					05-19
					
					527
					
				

			

		

		

			
				
一.功能效果

二.部分特殊规则
2.1 错误信息位置更改
在表单某选项中增加代码
<label class="error" for="表单中选项的name"></label>

例如 : 性别必选
<td>
	<input type="radio" id="male" value="m" name="sex"/>男
	<input type=...

			
		

	





	

		

			

				
					
jQuery  validate方法详解

				
			

			

				

					叶易风云
				

				

					08-09
					
					2121
					
				

			

		

		

			
				
在做项目的时候，往往会遇到需要对页面的上得某个值进行验证，而这个验证并不是常用的，需要用自己定义的规则来验证。这样的话，就可以使用jquery的自定义验证方法了。

下面我先说一下自定义验证的基本格式：
  



[javascript] view
 plaincopy






"text/javascript">  
        jQuery.valid

			
		

	





	

		

			

				
					
jQuery插件Validation表单验证详解

				
			

			

				

					10-18
				

			

		

		

			
				
此外，Validation插件还提供了其他功能，如禁用或启用表单提交、自定义验证方法、异步验证等。这使得jQuery Validation成为处理表单验证的强大工具，能够帮助开发者创建健壮且用户体验良好的Web应用。  总的来说，...

			
		

	





	

		

			

				
					
jquery validation插件表单验证的一个例子

				
			

			

				

					10-29
				

			

		

		

			
				
jQuery Validation 插件是用于在前端进行表单验证的强大工具，它可以帮助开发者轻松地实现对用户输入数据的有效性检查，确保用户在提交表单前填写的信息符合预设的规则。这个插件通常与jQuery库一起使用，以提供更加...

			
		

	





	

		

			

				
					
jQuery表单验证插件——Validation

				
			

			

				

					Cancer_Scorpio的博客
				

				

					09-30
					
					551
					
				

			

		

		

			
				
一些问题：
1、fieldset标签


定义和用法


fieldset 元素可将表单内的相关元素分组。

 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到  标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

 标签没有必需的或唯一的属性。


2、legend标签

			
		

	





	

		

			

				
					
JQuery validate 验证一个单独的表单元素实例

				
			

			

				

					12-10
				

			

		

		

			
				
前提：已引入JQuery validate插件

function validateOneElement() {
 //验证id="form1"的表单中id="elementId"的表单元素
 $("#form1").validate().element($("#elementId"))
}

以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	





	

		

			

				
					
【jQuery】 # jQuery插件validation自定义验证表单项的合法性

				
			

			

				

					LRcoding
				

				

					05-11
					
					1762
					
				

			

		

		

			
				
1. 引入插件
<!--先引入jQuery库，再引入jQuery校验插件-->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

<!-- 如果不想自定义错误提示信息，可以用插件库默认的，但是要引入中文（默认英文）-

			
		

	





	

		

			

				
					
jQuery表单校验

				
			

			

				

					聪明的小明的博客
				

				

					05-03
					
					947
					
				

			

		

		

			
				
1.登陆表单校验


  
    2.html

  
  
    //第一步;当我点击登录按钮的时候，提交表单，也就是将表单中打有name属性的标签的value值提交到表单
        //的 action属性值指向的地址
		function checkEmail(){
		
	      var flag=true;
		  //1.锁定对象
             var do

			
		

	





	

		

			

				
					
jquery.validate 添加验证规则方法

				
			

			

				

					fengxing_2的专栏
				

				

					08-16
					
					1445
					
				

			

		

		

			
				

/**
 * 必填项,空格不行
 */
jQuery.validator.addMethod("required2", function(value, element, param) {
    
    value = value.trim();
    // check if dependency is met
    if ( !this.depend( param, element ) ...

			
		

	





	

		

			

				
					
Jquery  validation自定义验证

				
			

			

				

					weixin_30396699的博客
				

				

					07-19
					
					91
					
				

			

		

		

			
				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" co...

			
		

	





	

		

			

				
					
BootStrap-CSS选项列表大全

				
			

			

				

					jklfjsdj79hiofo的专栏
				

				

					09-13
					
					9479
					
				

			

		

		

			
				
将以前学习的总结整理下：以下是BootStrap-CSS选项大全

手风琴效果
accordion
accordion-group
accordion-headin 
accordion-inner
accordion-toggle
active 选中状态
add-on
弹出提示信息
Alert
Alert-heading
Alert-block
Alert-dange

			
		

	





	

		

			

				
					
清除浮动，clearfix的几种解决方案

				
			

			

				

					kylvia的专栏
				

				

					08-13
					
					2491
					
				

			

		

		

			
				
之前给大家介绍两种浮动闭合的办法CSS清除浮动

			
		

	





	

		

			

				
					
clearfix的用法

				
			

			

				

					rudy24的博客
				

				

					09-02
					
					1689
					
				

			

		

		

			
				
如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有
 clear，导致不能被撑开。看下面的例子：
Div布局如下：

Css代码如下：
.out{border:1px solid #F00; width:500px;}
.inner1{width:200px; height:200px; float:left; border:1px so

			
		

	





	

		

			

				
					
jquery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案

					
热门推荐

				
			

			

				

					pandajc的博客
				

				

					10-23
					
					1万+
					
				

			

		

		

			
				
//声明一个函数
function validform() {
	return $("#form-article-add").validate({
		rules : {
			title : {
				required : true,
				minlength : 5,
				maxlength : 50
			},
			sellpoint : {
				required : true

			
		

	





	

		

			

				
					
jQuery Validation插件实战：全面表单验证与自定义规则

				
			

			

				

					
				

			

		

		

			
				
其特性包括内置的多种验证规则，如长度、字符类型、重复性检查等，以及出色的扩展性，允许开发者自定义验证逻辑。  为了使用 jQuery Validation，首先需要在HTML页面中引入 jQuery 和验证插件的 JavaScript 文件：  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值