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

最新推荐文章于 2025-05-24 15:06:15 发布
原创 最新推荐文章于 2025-05-24 15:06:15 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

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

本文介绍了一个使用jQuery进行客户端表单验证的例子，包括自定义验证方法及错误样式修改。通过设置验证规则确保必填项不为空，并对手机号码和电子邮箱格式进行了校验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先导入三个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>

























                

        

    

    
  



    



                



	

		

			

				
					
jQuery Validate表单验证实例

				
			

			

				

					05-26
				

			

		

		

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

			
		

	



                

            
              



	

		

			

				
					
jQuery插件Validation表单验证

				
			

			

				

					ardo_pass的博客
				

				

					12-16
					
					723
					
				

			

		

		

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

结果图



例子




[html] view
 plain copy






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

			
		

	



              


  
              

                


	

		

			

				
					
jQuery Validation 插件：实战指南与详解

					
最新发布

				
			

			

				

					weixin_33068055的博客
				

				

					05-24
					
					628
					
				

			

		

		

			
				
在现代Web应用中，表单验证是确保用户输入数据准确性和有效性的关键步骤。借助jQuery Validation插件，开发者可以便捷地设置预定义验证规则，并能根据项目需求创建自定义验证规则。本章节将介绍如何使用预定义规则以及如何编写和应用自定义规则。jQuery Validation插件提供了一系列的预定义验证规则，涵盖了常见的验证需求。这些规则包括但不限于必填（required）、邮箱（email）、数字（number）以及长度（length）等。

			
		

	





	

		

			

				
					
JQuery-validate表单验证

				
			

			

				

					优快云Y_88的博客
				

				

					06-25
					
					676
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					零点笔记
				

				

					05-19
					
					591
					
				

			

		

		

			
				
一.功能效果

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

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

			
		

	





	

		

			

				
					
jQuery Validation Engine 表单验证

					
热门推荐

				
			

			

				

					jielione的专栏
				

				

					07-18
					
					5万+
					
				

			

		

		

			
				
注意事项：

1.演示版本为 v2.2.4；

2.v2.0 以下的版本参数并不完全通用；



对 validationEngine.jquery.css 文件进行修改，修改如下：

1.提示内容字体改为宋体；

2.去除中各浏览器的私有属性（各浏览器已经支持圆角和阴影，不再需要加私有属性）。



对 jquery.validationEngine.js 文件进

			
		

	





	

		

			

				
					
jQuery  validate方法详解

				
			

			

				

					叶易风云
				

				

					08-09
					
					2274
					
				

			

		

		

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

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



[javascript] view
 plaincopy






"text/javascript">  
        jQuery.valid

			
		

	





	

		

			

				
					
jQuery表单验证插件——Validation

				
			

			

				

					Cancer_Scorpio的博客
				

				

					09-30
					
					651
					
				

			

		

		

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

			

		

		

			
				
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
					
					1016
					
				

			

		

		

			
				
1.登陆表单校验


  
    2.html

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

			
		

	





	

		

			

				
					
jquery.validate 添加验证规则方法

				
			

			

				

					fengxing_2的专栏
				

				

					08-16
					
					1526
					
				

			

		

		

			
				

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

			
		

	





	

		

			

				
					
Jquery-validate添加自定义校验和验证触发方式

				
			

			

				

					dxyzhbb的博客
				

				

					04-01
					
					5704
					
				

			

		

		

			
				
我们在使用Jquery-validate插件验证表单时候，默认的提供的校验规则有限，不够用怎么办，可以自己添加自定义校验规则；默认的触发方式有时候也不符合业务需求，需要进行定制化配置修改，下面就来介绍下如何添加自定义校验规则和触发方式的修改

jquery-validate插件如何下载和引入到项目中，这里不做详细介绍了。首先看下一个测试的页面验证效果


<!DOCTYPE html>...

			
		

	





	

		

			

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

				
			

			

				

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

				

					03-14
					
					4394
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
BootStrap-CSS选项列表大全

				
			

			

				

					jklfjsdj79hiofo的专栏
				

				

					09-13
					
					9528
					
				

			

		

		

			
				
将以前学习的总结整理下：以下是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
					
					2537
					
				

			

		

		

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

			
		

	





	

		

			

				
					
clearfix的用法

				
			

			

				

					rudy24的博客
				

				

					09-02
					
					1733
					
				

			

		

		

			
				
如果有一个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 Validate的使用发法和自定义验证方法的实现

				
			

			

				

					Your life needs a sense of ritual!
				

				

					01-16
					
					2万+
					
				

			

		

		

			
				
插件简介
使用步骤
自定义一些验证方法
手机号码的验证
汉字的验证
邮编的验证1.插件简介validate为表单提供了强大的验证功能，让客户表达验证变得简单。同时提供了大量的定制选项，满足应用程序的各种需求。
2.使用步骤（1） 下载地址：`http://jqueryvalidation.org/`。
 按照顺序引入一下的js文件：
<script src="js/jquery.js"></scri

			
		

	





	

		

			

				
					
全面掌握jQuery validation：表单验证插件类库与实例

				
			

			

				

					
				

			

		

		

			
				
- 自定义验证（使用 custom 方法） - 不同的验证组合，如 required 与 email 结合使用  #### 2. 验证器规则 开发者可以通过在 HTML 的 form 标签内使用特定的属性（如 required, type, min, max 等）或者在 ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值