关闭

Validate表单验证插件之常用参数介绍

时间: 2018-04-11阅读: 1492标签: 验证

原文链接:https://blog.csdn.net/weixin_40323561/article/details/79882826

Validate常用的一些参数和方法

1.errorElement

修改显示错误提示信息的html标签。默认是<label>,可以指定为<span>...。


	$("#formId").validate({ 
		errorElement:"span"
	});					
						

2.errorClass

修改显示错误信息的html标签的class属性。默认是error。


	$("#formId").validate({ 
		errorClass:"errors"
	});					
						

3.errorPlacement

自定义错误信息的提示位置。默认是在这个验证元素的第一个input元素后追加。因为radio和CheckBox会有多个input元素,还有select元素没有input元素,所以利用这个方法来自定义提示位置。


	$("#formId").validate({ 		
		/*参数error是执行该函数的错误信息,element是执行该函数的错误信息的元素*/			
		errorPlacement: function (error, element) { /* 指定错误信息位置 */
			/* 如果是radio或checkbox */
			if (element.is(':radio') || element.is(':checkbox')||element.is('select')) { 
				error.appendTo(element.parent()); /* 将错误信息添加当前元素的父结点后面 */
			} else {
				error.insertAfter(element);
			}
		}	
	});					
						

4.errorLabelContainer

指定错误信息具体位置。演示二中有演示。


	$("#formId").validate({ 
	    /*将错误信息统一放在class属性为error的div容器中*/
		errorLabelContainer: $("#formId div.error")/*用于演示二中的第一个表单,只用了div作为错误信息的容器*/
		/* errorLabelContainer: $("ol", container),  把错误信息放到ol中 */
		/*这两种方式都可以*/
	});					
						

5.errorContainer

指定错误信息容器。它适用于演示二中的第二个表单。div是父级元素,用errorContainer指定该元素。而子级元素还有ol li,用errorLabelContainer指定。


	$("#formId").validate({ 
	   /*class属性为container的div容器*/
	   errorContainer:$('div.container')
	});					
						

6.wrapper

可以在错误信息外用其它HTML标签包装一层。


	$("#formId").validate({ 					
		wrapper: 'li' /* 含义是使用li标签把errorElement包起来 */	
	});						
						

7.success

每个元素验证通过后执行的函数。

如果后边是字符串,默认会当作一个css类。


	$("#formId").validate({
	  success:String,Callback
	});					
						

还可以是一个函数。


	$("#formId").validate({
		success: function(label) {
	      	    label.html(" ").addClass("checked");
	        }	
	});					
						

8.debug

只验证,不提交表单。(调试十分方便)


	$("#formId").validate({
	   debug:true
	});					
						

如果一个页面多个表单想设置成debug,那么


	$.validator.setDefaults({
	  debug:true
	});				
						

9.ignore

忽略某些元素不验证。


	$("#formId").validate({
		ignore:":hidden"
	});					
						

10.showErrors(errorMap,errorList)

处理错误的方法,在验证错误后,回调用该方法,通过这个方法显示错误信息。

errorMap:json数据,key:input元素的id属性,value:message。

errorList:校验错误的元素列表。


11.$.validator.setDefaults({});

拦截表单验证成功后的提交表单事件,执行完函数中的代码在提交表单。


	$.validator.setDefaults({
		  submitHandler: function() {
			  alert("成功!");/* 提示成功 */
			  $("#formId").val()="";  /* 清空form表单 */
		  }
	});					
						

12.使用其它方式代替默认的submit


	$(document).ready(function() {
	 $("#formId").validate({
	        submitHandler:function(form){
	            alert("提交事件!");   
	            form.submit();
	        }    
	    });
	});					
						

13.重置表单


	$(document).ready(function() {
	 var validator = $("#formId").validate({
	        submitHandler:function(form){
	            alert("成功");   
	            form.submit();
	        }    
	    });
	    $("#reset").click(function() {
	        validator.resetForm();
	    });
	
	});					
						

14.自定义validate验证规则

实例


	// 电话号码验证    
	jQuery.validator.addMethod("isTel", function(value, element,param) {    
	  var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    
	  return this.optional(element) || (tel.test(value));    
	}, "请正确填写您的电话号码。");					
						

说明

addMethod(name,method,message)方法:

参数name 是添加的验证规则的名字

参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数

参数message是自定义错误提示信息

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/619

关闭

使用JavaScript策略模式校验表单

Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表单。假如我们有一个表单,校验逻辑如下

Vue中的验证登录状态

Vue项目中实现用户登录及token验证,先说一下我的实现步骤:使用easy-mock新建登录接口,模拟用户数据;使用axios请求登录接口,匹配账号和密码,账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页

javascript如何验证不能为空?

整体为如果以一个或多个空格开始,替换全部空格为空,或者,如果以一个或多个空格结束,替换全部空格为空。

javascript如何检查是否是浮点数?

JavaScript中可以使用正则表达式来判断是否浮点数。首先是判断是不是数字isNaN(),JavaScript中判断浮点数的正则表达式:在程序中的使用方法

javascript如何验证ip是否合法?

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

canvas实现随机验证码

canvas生成背景图和文字 设置字体样式和大小,String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写,随机抽取不重复的6位数字组成验证码字符串

javascript如何判断对象是不是为空?

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等。JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

javascript如何判断数字是否为浮点数?

JavaScript中可以使用正则表达式来判断是否是浮点数,判断前我们可以使用正则表达式来判断是否是数字。

javascript如何验证是否为11位有效电话号码?

JavaScript中可以使用正则表达式判断是否为11为有效电话号码:这个表达式的意思是:1--以1为开头;2--第二位可为3,4,5,7,8,中的任意一位;3--最后以0-9的9个整数结尾。

网页如何实现拼图滑块的验证码_纯js的实现

滑动解锁应该是有两张图片,一张正常的,一张上面有解锁区域的(后端给),然后前端只用把用户释放鼠标后,滑动模块在图片上的xy轴传给后端,后端做成功与否的判断。如果只是纯前端js验证,不具备高安全性。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!