当前位置: 首页 > web >正文

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

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是自定义错误提示信息

http://www.xdnf.cn/news/11651.html

相关文章:

  • 网关 GateWay 的使用详解、路由、过滤器、跨域配置
  • 神经网络(NN)网络构建及模型算法介绍
  • 从计网的角度讲明白什么是网关
  • Apollo入门使用手册
  • Java资源大全(更新中)
  • Keil(MDK)STM32和51版本详细安装
  • GPU 性能测试软件:GPU-Z,2023 年 9 月 12 日更新
  • 【19】linux进阶——后台运行()和nohup命令
  • ESFP型人格的特征,ESFP型人格的优势和劣势分析
  • react Native 环境安装配置——图解版一目了然
  • Netty基础入门和基本使用
  • TortoiseSVN使用教程[多图超详细]
  • Numpy的用法详细总结
  • 百度程序员删库跑路被逮捕!
  • 一文看懂Mesh组网
  • Android Gradle开发与应用 (一) : Gradle基础
  • iview--使用总结
  • 抖音越狱版本App下载
  • Verilog基础语法(13)之case语句
  • Element-UI介绍:主题定制、自定义组件和插件扩展
  • OpenCV快速入门:初探
  • Fiddlerd的工作原理与配置
  • JDK安装太麻烦?一篇文章搞定
  • Maven详解(入门到精通)学习maven有这个就够了
  • 传奇GEE引擎版本如何封挂?GEE引擎设置简单的封挂脚本教程
  • 窄带高清技术之百万级并发下的演唱会直播细节修复
  • C#从入门到精通(史上最全,爆肝十万字)
  • 独家:经开区受理京东涉嫌卖假货投诉案,刘强东在日本难掌控业务
  • 程序员福利各大平台免费接口,非常适用!
  • KVM虚拟化