`
cpf1985
  • 浏览: 78721 次
  • 性别: 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

    JS正则验证大全 (.Net客户端验证)

    `validateForm`函数会在用户点击提交按钮时触发,如果输入的邮件地址不符合正则表达式,就会弹出警告并阻止表单提交。 `PageValidate.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表单验证插件,它提供...

    jq非空验证,js正则表达式验证邮箱和手机号码

    HTML5的`required`属性就是一个简单的非空验证方式,如果用户未填写该字段,提交表单时会触发错误。在jQuery中,我们可以通过`$.trim()`方法去除前后空格,再检查字符串长度,以实现更精细的非空验证。 5. **事件...

    前端验证源代码包括JQuery插件验证

    源代码可能会展示如何定义验证规则,如何处理错误,以及如何在用户提交表单前触发验证。通过阅读和理解这部分代码,我们可以学习到如何根据业务需求定制验证逻辑。 至于`dangdang.sql`,由于其扩展名是SQL,这通常...

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

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

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

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

    asp.net 非空验证

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

    WPF多种验证方式

    当数据模型的属性改变时,验证规则会被触发,如果输入不合法,将返回错误消息。 2. **验证规则类**:WPF允许你通过继承`ValidationRule`类创建自定义的验证规则。这些规则在数据绑定发生时被调用,你可以在`...

    JQuery实现表单验证

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

    js表单验证

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

    vue表单验证插件

    4. **事件处理**:提供事件接口,如`validate`和`reset`,用于手动触发验证或重置表单状态。 5. **自定义规则**:提供扩展接口,允许用户根据项目需求添加自定义验证规则。 `vue-verify-master`这个压缩包很可能...

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

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

    BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

    BootStrapValidator表单验证插件的坑还真不少,又让我碰上一个… BootStrapValidator验证的表单中只可有一个 type="submit" 的按钮。 我这样写了之后 (代码如下) ,点击其它按钮仍会触发验证… 1.错误代码 //...

    登陆验证系统(JAVA GUI界面)

    用户点击登录按钮后,需要触发一个事件来执行验证操作。Java中的ActionListener接口可以实现这一功能,我们可以通过实现其actionPerformed()方法来定义当按钮被点击时执行的逻辑。 5. **数据验证** 在用户提交...

Global site tag (gtag.js) - Google Analytics