`
cpf1985
  • 浏览: 78272 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

juqeryvalidate验证 自由触发验证

阅读更多
  对于juqery的验证框架 实在是不想用 但是没办法项目组要用统一的验证方式对于jquery的验证最常见的写法就是 如下:

    $("#addressForm").validate({
		rules: {
			'memberAddress.name':{
			    required: true,
				minlength:1,
				maxlength:20
			},
			'memberAddress.address':{
			    required: true,
				minlength:1,
				maxlength:128
			},
			'memberAddress.postcode':{
			required: true,
			   minlength:6,
			   maxlength:6,
			   number:true
			},
			'memberAddress.zoneCode':{
			   minlength:3,
			   maxlength:4,
			   number:true
			},
			'memberAddress.tel':{
			   minlength:7,
			   maxlength:8,
			   number:true
			},
			'memberAddress.mobile':{
			   minlength:11,
			   maxlength:11,
			   number:true
			}
		},
		
		messages: {
			'memberAddress.name': {
				required:  '请输联系人姓名',
				minlength: '请输联系人姓名',
				maxlength: '联系人姓名的最大长度为20'
			},
			'memberAddress.address':{
				required:'请输入联系地址',
				minlength:'请输入联系地址',
				maxlength:'联系地址最大长度为128'
			},
			'memberAddress.postcode':{
			   required:'请输入邮编',
			   minlength:'请输入正确的邮编',
			   maxlength:'请输入正确的邮编',
			   number:'请输入正确的邮编'
			},
			'memberAddress.zoneCode':{
			   minlength:'请输入正确的区号',
			   maxlength:'请输入正确的区号',
			   number:'请输入正确的区号'
			},
			'memberAddress.tel':{
			   minlength:'请输入正确的电话',
			   maxlength:'请输入正确的电话',
			   number:'请输入正确的电话'
			},
			'memberAddress.mobile':{
			   minlength:'请输入正确的手机号',
			   maxlength:'请输入正确的手机号',
			   number:'请输入正确的手机号'
			}
			
		},	
		errorElement: "span",
    	        errorClass: "error",
		success:"checked",
		submitHandler : function() {//控制是否提交,可以不写
			return checkInfo();
		}
		
	  });
   但是假设我的表单是ajax提交的的 哪怎么办呢 

   可以这样写:
   validate=$("#addressForm").validate({
		rules: {
			'memberAddress.name':{
			    required: true,
				minlength:1,
				maxlength:20
			},
			'memberAddress.address':{
			    required: true,
				minlength:1,
				maxlength:128
			},
			'memberAddress.postcode':{
			required: true,
			   minlength:6,
			   maxlength:6,
			   number:true
			},
			'memberAddress.zoneCode':{
			   minlength:3,
			   maxlength:4,
			   number:true
			},
			'memberAddress.tel':{
			   minlength:7,
			   maxlength:8,
			   number:true
			},
			'memberAddress.mobile':{
			   minlength:11,
			   maxlength:11,
			   number:true
			}
		},
		
		messages: {
			'memberAddress.name': {
				required:  '请输联系人姓名',
				minlength: '请输联系人姓名',
				maxlength: '联系人姓名的最大长度为20'
			},
			'memberAddress.address':{
				required:'请输入联系地址',
				minlength:'请输入联系地址',
				maxlength:'联系地址最大长度为128'
			},
			'memberAddress.postcode':{
			   required:'请输入邮编',
			   minlength:'请输入正确的邮编',
			   maxlength:'请输入正确的邮编',
			   number:'请输入正确的邮编'
			},
			'memberAddress.zoneCode':{
			   minlength:'请输入正确的区号',
			   maxlength:'请输入正确的区号',
			   number:'请输入正确的区号'
			},
			'memberAddress.tel':{
			   minlength:'请输入正确的电话',
			   maxlength:'请输入正确的电话',
			   number:'请输入正确的电话'
			},
			'memberAddress.mobile':{
			   minlength:'请输入正确的手机号',
			   maxlength:'请输入正确的手机号',
			   number:'请输入正确的手机号'
			}
			
		},	
		errorElement: "span",
    	errorClass: "error",
		success:"checked",
		submitHandler : function() {//控制是否提交,可以不写
			return checkInfo();
		}
		
	  });

         
      然后 在你提交前触发的function中
      function submitform(){
           var f=validate.form();
            if(f){}else{}
       }
     好了这样就行了

分享到:
评论

相关推荐

    layui插件表单验证提交触发提交的例子

    这篇文章主要讲述了如何使用layui插件进行表单验证以及提交触发提交的实现方法。下面,我们将详细解析文章中涉及到的关键知识点。 ### 一、Layui框架介绍 Layui是一个前端UI框架,它提供了一套简单易用的界面元素...

    使layui.js form 可主动验证表单是否通过

    使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486

    Vue ~ element-ui 动态表单验证,支持添加和删除操作

    本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景,主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证: Vue.js允许开发者通过...

    js实时动态验证表单是否合法

    - **onchange事件**:当元素的值改变且失去焦点时触发,适用于提交前验证。 4. **自定义验证函数** - 可以创建自定义验证函数,根据业务需求定制验证逻辑,如检查密码强度、验证用户名唯一性等。 5. **表单元素...

    H5滑动验证+H5源码

    5. **回调函数**:成功或失败的验证结果通常会触发预定义的回调函数,以便在验证完成后执行相应的业务逻辑。 6. **安全性**:除了基本的验证功能,源码可能还包括一些安全措施,如防止快速多次尝试、防止模拟器自动...

    singularly3_触发控制_事件触发控制_事件触发控制仿真_事件触发控制_事件触发

    5. **实时实现**:在实际应用中,事件触发控制需要与硬件相结合,考虑到实时性和执行效率,可能需要特殊的嵌入式系统或硬件在环(Hardware-in-the-Loop)仿真来验证其可行性。 6. **仿真工具**:"singularly3.slx...

    php+ajax表单无刷新验证

    1. **事件监听**:使用JavaScript监听表单元素的`onchange`、`onkeyup`等事件,当用户输入时触发AJAX请求。 2. **创建XMLHttpRequest对象**:实例化一个XMLHttpRequest对象,用于与服务器进行通信。 3. **发送请求**...

    jq表单验证大全.rar jq表单验证大全.rar

    3. 事件绑定:`.on()`方法允许我们绑定事件监听器,例如`change`、`blur`、`keyup`等,这些事件在用户交互时触发验证。 二、jQuery验证插件 1. jQuery Validation Plugin:这是最常用的jQuery表单验证插件,它提供...

    jQuery滑块验证插件制作手机移动端触屏拖动滑块验证网页跳转效果代码。

    当用户松开滑块时,`stop`事件会触发,检查滑块是否到达目标位置。如果验证成功,可以弹出提示信息,并在此处替换为实际的网页跳转代码,如`window.location.href`。 总结起来,这个滑块验证插件的实现依赖于HTML...

    jQuery阿里云登录滑块拖动验证.zip

    4. **事件监听**:添加鼠标或触摸事件监听器,当用户与滑块交互时,触发对应的处理函数。这些处理函数会更新滑块的位置,并检查是否完成验证。 5. **验证逻辑**:当滑块被拖动到正确位置时,进行验证逻辑。这通常...

    js表单验证、js导出excel、js验证

    1. CSV导出:通过创建一个包含所有数据的大型字符串,使用换行符和逗号分隔每一行和每一列,然后设置`Content-Type`为`text/csv`并触发浏览器下载。 2. XLSX库:可以使用如` SheetJS`这样的库,它提供了处理和生成...

    很不错的验证框架jquery

    6. **事件驱动**:提供了一系列的事件,如invalid.form(表单验证失败时触发)、valid.form(表单验证成功时触发),方便开发者进行更深入的定制。 在描述中提到“希望大家给点意见”,这可能意味着作者在寻求社区...

    asp.net 非空验证

    ASP.NET还提供了一些验证相关的事件,如Page.Validate(),可以手动触发验证;还有Validating和Validated事件,可以在验证过程中进行进一步的处理。 8. **AJAX验证**: 使用ASP.NET AJAX,可以实现无刷新验证,...

    绑定机器码的网络验证系统,小巧玲珑,安全可靠,绝对源码.rar

    若无,则触发网络验证过程,将机器码和授权码发送至服务器进行校验。服务器的响应决定了软件是否可以启动及后续功能的解锁。 易语言作为这个系统可能使用的编程工具,是一种中国本土开发的、以简单直观为特点的编程...

    JQuery实现表单验证

    2. **事件绑定**:使用`.on()`方法绑定事件监听器,如`change`、`blur`或`keyup`事件,每当用户改变输入或离开输入框时触发验证。 3. **验证函数**:编写验证函数,检查用户输入是否符合规则。例如,检查邮箱格式...

    用户注册表单验证(Ajax验证)

    2. **JavaScript事件监听**:使用JavaScript监听用户输入事件,如onkeyup或onblur,当用户离开输入框或输入完成后触发验证函数。 3. **Ajax调用**:在验证函数内部,创建XMLHttpRequest对象实例,设置请求方法(GET...

    一键加群验证易语言源码.zip

    在加群验证中,可能有“点击加入”按钮触发的事件,负责发送加群请求。 2. **网络通信模块**:程序需要与QQ服务器进行通信,发送加群请求并接收验证信息。易语言提供了网络模块,如TCP/IP协议栈,用于实现网络连接...

    js表单验证

    - **onsubmit**:在表单提交时触发验证,如果验证失败则阻止表单的默认提交行为。 - **onchange**:当表单元素值改变时触发,实时验证用户输入。 - **onblur**:当用户离开输入框时触发,提供离开后的一次性验证...

    JS表单验证与JS常见问题解决方案

    - `onsubmit`:在表单提交时触发验证。 - `onblur`:当元素失去焦点时执行验证。 - `onchange`:在元素值改变时进行验证。 4. **错误提示**: - 使用`setCustomValidity`方法设置自定义验证错误信息。 - `...

    时间触发嵌入式系统设计模式_时间触发嵌入式系统设计模式_嵌入式_

    - **验证与测试**:验证时间触发系统的行为正确性和可靠性是一项复杂的工程。 7. **优势与局限性**: - **优势**:高可靠性、可预测性、易于分析和验证。 - **局限性**:可能需要更多的硬件资源,设计复杂度增加...

Global site tag (gtag.js) - Google Analytics