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

最新推荐文章于 2024-03-14 07:00:00 发布
最新推荐文章于 2024-03-14 07:00:00 发布
阅读量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_
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
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
					
					624
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					零点笔记
				

				

					05-19
					
					528
					
				

			

		

		

			
				
一.功能效果

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

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

			
		

	





	

		

			

				
					
jQuery  validate方法详解

				
			

			

				

					叶易风云
				

				

					08-09
					
					2126
					
				

			

		

		

			
				
在做项目的时候，往往会遇到需要对页面的上得某个值进行验证，而这个验证并不是常用的，需要用自己定义的规则来验证。这样的话，就可以使用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
					
					555
					
				

			

		

		

			
				
一些问题：
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
					
					949
					
				

			

		

		

			
				
1.登陆表单校验


  
    2.html

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

			
		

	





	

		

			

				
					
jquery.validate 添加验证规则方法

				
			

			

				

					fengxing_2的专栏
				

				

					08-16
					
					1447
					
				

			

		

		

			
				

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

			
		

	





	

		

			

				
					
「jQuery系列」jQuery 校验表单（Validate）

					
最新发布

				
			

			

				

					日常笔记/总结/系列知识梳理
				

				

					03-14
					
					2832
					
				

			

		

		

			
				
jQuery Validate的一些常见使用场景：

网站前端表单验证：无论是用户注册、登录、提交订单还是其他类型的表单输入，使用jQuery Validate可以确保用户输入的数据符合预设的规则，如邮箱格式、密码强度、必填项等。这有助于防止因用户输入错误而导致的数据错误或系统异常。
动态校验场景：在前端设计中，实时、动态的信息校验提醒能够提供良好的用户体验。jQuery Validate提供了强大的动态校验功能，能够实时检查用户的输入，并在不满足规则时即时给出提示，帮助用户快速修正错误。

			
		

	





	

		

			

				
					
jQuery插件之validation插件

				
			

			

				

					qq_38864315的博客
				

				

					11-17
					
					888
					
				

			

		

		

			
				
前面的话
　　最常使用javascript的场合就是表单的验证，而jQuery作为一个优秀的javascript库，也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。本文将详细介绍validation插件
概述
　　jQuery Validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，

			
		

	





	

		

			

				
					
jquery validation 简介

				
			

			

				

					weixin_43931625的博客
				

				

					08-03
					
					595
					
				

			

		

		

			
				
jqueryvalidation简介
























			
		

	





	

		

			

				
					
jquery validate (jquery 验证的三种方式)

				
			

			

				

					MJZ_CSDN的专栏
				

				

					05-27
					
					4345
					
				

			

		

		

			
				
jquery  验证非常简单，下面总结常用的三种方式：

第一种方式：也是比较标准的方式：

 首先引入jquery  插件和 jquery 验证插件：

第一步：引入插件







第二步： 定义表单的错误输出：  


#frm label.error {
color: Red;
}


第三步：添加错误处理方法；

jquery验证，需要有

			
		

	





	

		

			

				
					
【JQuery】JQuery入门——JQuery 插件-validation

				
			

			

				

					专注于Java领域开发 关注我 带你玩转Java
				

				

					08-04
					
					599
					
				

			

		

		

			
				
简述、导入、为指定表单加入校验、为校验加入规则、为规则自定义错误信息 

			
		

	





	

		

			

				
					
jquery-validation的使用

					
热门推荐

				
			

			

				

					Tina的博客
				

				

					08-01
					
					1万+
					
				

			

		

		

			
				
时隔多年再开始写前端代码，遇到的问题都有点弱，记录一下。

官网：https://jqueryvalidation.org/



我只引入了两个js，因为我们的系统只需要英文环境。如果需要做国际化或者切换其他语言环境，需要引入localization下的js。


&lt;script src="../../plugin/jquery-validation-1.17.0/jquery.valid...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值