实用的表单验证插件jqueryValidation

摘要:默认值原生的表单提交类型表单验证通过后提交表单的回调函数。使用去控制这个组的验证信息被放置的位置。例子禁用对焦验证。他的回调函数被传入两个参数类型元素这个元素是当前正在被验证的,是一个元素。此函数的上下午为验证对象本身。

Validation作为表单验证中最常用的插件,为我在开发过程中提供了很多便利的地方。虽然说我很常用,但是我真的不敢说我会用Validation。每次使用都是在菜鸟教程上粘贴代码,修改rule就这么用了。所以自己决定还是从头撸一遍文档,但是没找到中文文档。这就有了翻译这个文档的意愿了,那就开始吧。官方文档的位置

使用下菜鸟教程的cdn,因为依赖jquery,所以必须先引入jquery

>使用方式将校验规则写到控件中:

Pleaseprovideyourname,emailaddress(won"tbepublished)andacommentName(required,atleast2characters)

E-Mail(required)

URL(optional)

Yourcomment(required)

根据表单控件的类型和属性进行校验,这样比较不灵活

将校验规则写到js代码中

validate是Validation的主函数,用于验证选择的表单。

类型:object

debug(默认值:false)类型:boolean允许debug模式。如果他设置为true,表单不会被提交而且验证的错误信息将在控制台被输出。例子:组织表单进行提交,设置提示验证信息和debug信息。

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

submitHandler(默认值:原生的表单提交)类型:function()表单验证通过后提交表单的回调函数。例子:当表单验证后使用ajax提交表单。

$("#myform").validate({submitHandler:function(form){$(form).ajaxSubmit();}});例子:使用回调函数先执行部分操作然后再提交表单。注意:参数中的form对应的是一个DOM元素,而且这里提交不会再次出发此回调函数。

$("#myform").validate({submitHandler:function(form){//表单提交前的操作form.submit();}});此回调有两个参数:

form

类型:DOM元素当前被验证的form表单元素。

event

类型:事件对象表单提交的事件

invalidHandle类型:function()当表格没有通过验证提交时的回调函数例子:当用户尝试提交一个验证无效的表单时,在表格内显示一个展示有多少错误信息

$("#myform").validate({invalidHandler:function(event,validator){//"this"referstotheformvarerrors=validator.numberOfInvalids();if(errors){varmessage=errors==1"Youmissed1field.Ithasbeenhighlighted":"Youmissed"+errors+"fields.Theyhavebeenhighlighted";$("div.errorspan").html(message);$("div.error").show();}else{$("div.error").hide();}}});此回调函数有两个参数:

event类型:事件对象

一个自定义事件对象,因为该函数被绑定为一个事件处理程序。

validator类型:Validator

当前表单验证的实例。

ignore(默认值:ignore)类型:css选择器当验证的时候,将选择器元素过滤出来不进行校验。使用jquery的not()方法,所以被过滤的表单空间不进行校验。type值为submit和reset的input元素也被过滤掉,他们都是被被禁的元素。例子:当校验的时候过滤掉带有“ignore”类名的元素

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

rules(默认值:校验规则从标签的类名、属性、数据中)类型:对象键值对定义用户的校验规则。键对应的元素(或者一组的复选框/单选框)的name属性,值是一个对象含有规则/键值对或字符串组成。可以与类名、属性、数据中的校验规则并用。每个规则都可以定义为一个含有depends属性,用于与符合某些条件的规则。看下面第二个例子能更清楚这种规则定义方式。例子:定义一个必填的name元素和一个必填的email元素(使用简便方式)和有一个有效的email地址。

$("#myform").validate({rules:{//simplerule,convertedto{required:true}name:"required",//compoundruleemail:{required:true,email:true}}});例子:定义一个必填email地址的contact元素,最后取决于一个复选框是否选中来验证email规则

$("#myform").validate({rules:{contact:{required:true,email:{depends:function(element){return$("#contactform_email").is(":checked");}}}}});例子:配置一个规则需要一个参数,且有一个依赖的回调函数

$("#myform").validate({rules:{//atleast15€ whenbonusmaterialisincludedpay_what_you_want:{required:truemin:{//minneedsaparameterpassedtoitparam:15,depends:function(element){return$("#bonus-material").is(":checked");}}}}});

messages(默认值:被使用的验证规则的默认验证信息)类型:对象键值对的形式定义自定义信息。键是验证元素的name值,值是这个元素显示出的验证信息。值除了是一个单纯的字符串,也可以是对应此元素每个验证规则的对象。重载一个元素的默认验证信息(通过这个方式)。每message可能是一个字符串或者是一个函数。这个函数被调用在validator的作用域内,这个函数的第一个参数是验证规则中的参数,第二个参数是验证的元素,而且必须返回一个字符串作为验证信息。例子:定义一个必填的name元素和一个必填的验证email规则的元素。一个简单的信息对应必填的name元素,两个信息对应email元素。

$("#myform").validate({rules:{name:"required",email:{required:true,email:true}},messages:{name:"Pleasespecifyyourname",email:{required:"Weneedyouremailaddresstocontactyou",email:"Youremailaddressmustbeintheformatofname@domain.com"}}});例子:校验name元素规则为必填和至少两个字符。提供一个函数信息使用jquery.validataor.format以避免在两个地方指定参数。

$("#myform").validate({rules:{name:{required:true,minlength:2}},messages:{name:{required:"Weneedyouremailaddresstocontactyou",minlength:jQuery.validator.format("Atleast{0}charactersrequired!")}}});

groups类型:对象定义错误信息的组。一个组包含作为键的任意组名和一个用空格分隔的元素name的字符串列表作为值。使用errorPlaement去控制这个组的验证信息被放置的位置。例子:用一个table布局form元素,放置错误信息在下一个单元input之后。

$("#myform").validate({groups:{username:"fnamelname"},errorPlacement:function(error,element){if(element.attr("name")=="fname"||element.attr("name")=="lname"){error.insertAfter("#lastname");}else{error.insertAfter(element);}}});

normalizer类型:函数为验证,预处理或转换元素的值。这个放在后面详细说。

onsubmit(默认值:true)类型:bool在表单提交的时候进行验证。设置false时只能其他事件引起验证。设置成函数可以设何时执行验证。一个布尔值的true不是一个有效值,就是true无需设置。例子:当表单提交的不验证,允许用户使用自定义的方式提交。包括按键、失去焦点、点击事件等。

$("#myform").validate({onsubmit:false});

onfocusout类型:布尔或者函数校验元素(除了checkboxes或者radio按钮)在失去焦点的时候。如果这个元素没有输入任何内容,则跳过所有规则,除非这个元素已经被标记为错误。设置一个函数去界定何时进行校验。一个true值不是一个有效的值。例子:禁用对焦验证。

$("#myform").validate({onfocusout:false});他的回调函数被传入两个参数:

element类型:元素

这个元素是当前正在被验证的,是一个dom元素。

这个失去焦点的事件对象。

onkeyup类型:布尔值或者函数验证元素在释放按键的时候。当没有表单元素标记为无效的时候,也不会发生。除上述情况之外,所有的规则将被每次按键事件所引起。设置false将禁止。设置一个函数去界定何时进行校验。一个true值不是一个有效的值。例子:禁止按钮验证

$("#myform").validate({onkeyup:false});这个回调函数被传两个参数:

元素类型:元素

这个按键的事件对象。

onkeyup校验checkboxes、radio按钮,和select元素在click事件。设置false时去禁止。设置一个函数去界定何时进行校验。一个true值不是一个有效的值。例子:禁止点击校验checkboxes、radio按钮和select元素。

$("#myform").validate({onclick:false});元素类型:元素

这个点击的事件对象。

focusinvalid类型:布尔值聚焦最后一个激活的元素或者第一个验证无效的元素,通过使用validator.focusinvalid()方法。最后一个被激活的元素是表单提交的时候最后一个聚焦的元素,阻止他失去焦点。如果没有一个元素被聚焦他将会获取表单中第一个元素,除非这个配置为false。例子:禁止聚焦无效的元素。

$("#myform").validate({focusInvalid:false});

focusCleanup(默认值为:false)类型:布尔值如果设置为enabled,移除错误信息的css类名和隐藏所有的错误信息,当此元素被聚焦的时候。防止联合focusinvalid一起使用。例子:在聚焦表单元素的时候,移除错误的css类名和隐藏错误信息。

$("#myform").validate({errorClass:"invalid"});

errorClass(默认值为:"error")类型:字符串使用这个类名创建标签,查找错误的标签并添加到错误的元素。例子:设置错误的类名为"invalid"

validClass(默认值为:"valid")类型:字符串这个类名是增加到表单元素,在这个元素被验证认定为有效的之后。例子:设置有效的类名为"success"

$("#myform").validate({validClass:"success"});

errorElement(默认值为:"label")类型:字符串使用这个标签类型去创建错误信息提示。默认的是label,这样的好处是可以用for属性创建一个意思明确的链接在错误信息和字段。例子:设置错误的标签类型为"em"。

$("#myform").validate({errorElement:"em"});

wrapper(默认值为:window)类型:字符串包裹错误标签用此属性定义的标签。结合errorLabelContainer属性创建一个错误信息列表。例子:包裹每个错误元素使用li标签,创建一个错误信息列表。

$("#myform").validate({wrapper:"li"});

errorLabelContainer类型:css选择器隐藏和展示验证时的容器例子:所有的错误的标签被展示在一个id为‘messageBox’无序列表,通过errorContainer选项传递的选择器指定元素中。所有的错误元素被包裹在一个li元素中,制成一个信息列表。

$("#myform").validate({errorLabelContainer:"#messageBox",wrapper:"li",submitHandler:function(){alert("Submitted!")}});

errorContainer类型:css选择器隐藏和展示验证时的容器例子:使用一个额外的容器包裹错误信息。当验证错误的时候,这个元素将所有的错误信息显示和隐藏。然而,错误标签本身被添加到作为errorLabelContainer给出的元素,这里是无序列表。因此,错误标签也被包装到li元素(包装选项)中。

$("#myform").validate({errorContainer:"#messageBox1,#messageBox2",errorLabelContainer:"#messageBox1ul",wrapper:"li",debug:true,submitHandler:function(){alert("Submitted!")}});

showErrors类型:函数一个自定义信息展示的回调函数。获取错误信息的对象作为第一个参数,一个错误信息的数组作为第二个。此函数的上下午为验证对象本身。这些参数只包含当前已经验证过的元素,当在focusout或keyup上进行验证时,它们可以是单个元素。可以通过调用this.defaultShowErrors()来触发(除了自己的消息)默认行为。例子:每次一个错误信息呢被展示的时候更新无效元素的数量。伴随着默认的错误信息的展示。

$("#myform").validate({showErrors:function(errorMap,errorList){$("#summary").html("Yourformcontains"+this.numberOfInvalids()+"errors,seedetailsbelow.");this.defaultShowErrors();}});errorMap类型:对象

键值对,对象的键是校验的input元素name,而值是显示的校验信息。

errorList类型:数组

一个包含当前已经被校验过的元素的数组。包含的对象有两个属性

-message类型:字符串input元素展示的验证信息-element类型:元素此条目的dom节点

errorPlacement(默认值为:放置错误信息的标签在无效的input元素后面)类型:函数自定义产生的错误验证标签的位置。第一个参数产生的验证错误信息的jquery对象。第二个参数是验证无效的input元素的jquery对象。例子:使用一个table来布局form表单,防止错误信息在input后的td里。

$("#myform").validate({errorPlacement:function(error,element){error.appendTo(element.parent("td").next("td"));}});这个回调函数有两个参数:

error类型:jquery对象

要插入DOM中的错误标签。

element类型:jquery对象

验证信息对应的已经验证input元素,用于error的定位。

success类型:字符串或函数如果已经定义,将产生一个对有效input元素的验证信息。如果是赋值的是字符串,则将给这个验证信息的标签加上一个class类名。如果赋值是函数,这个验证信息标签的jquery是第一个参数,第二个参数是被验证的input元素(注意是dom元素)。可以对验证信息进行修改文字。例子:添加一个"valid"类名到验证信息的元素,使用css控制样式。

$("#myform").validate({success:"valid",submitHandler:function(){alert("Submitted!")}});例子:添加一个"valid"类名到验证信息的元素,通过css控制演示,并且添加文字‘ok!’

$("#myform").validate({success:function(label){label.addClass("valid").text("Ok!")},submitHandler:function(){alert("Submitted!")}});这个回调函数传入两个参数:

label类型:jquery

验证信息标签,使用它可以添加class类名和替换文本内容。

element类型:dom元素

当前验证通过的表单元素对应的dom元素。

highlight(默认值:添加errorClass(在option中设置)到表单元素)类型:函数设置无效表单元素如何高亮。例子:通过先淡出再淡入的效果高亮一个验证无效的元素。

$("#myform").validate({highlight:function(element,errorClass){$(element).fadeOut(function(){$(element).fadeIn();});}});例子:添加一个errorclass到他的验证无效元素和验证信息

$("#myform").validate({highlight:function(element,errorClass,validClass){$(element).addClass(errorClass).removeClass(validClass);$(element.form).find("label[for="+element.id+"]").addClass(errorClass);},unhighlight:function(element,errorClass,validClass){$(element).removeClass(errorClass).addClass(validClass);$(element.form).find("label[for="+element.id+"]").removeClass(errorClass);}});这个回调函数传入三个参数:

element类型:DOM元素

当前验证无效的表单元素。

errorClass类型:字符串

option中errorClass当前值。

validClass类型:字符串

option中validClass当前值。

unhighlight(默认值:移除errorClass)类型:函数设置失去聚焦的回调函数,参数与highlight相同。

ignoreTitle(默认值:false)类型:布尔值

检查是否符合验证规则,使用这个方法的之前必须对form元素执行validate()。例子:设置一个form表单的验证规则,然后检查表单是否符合验证规则在点击按钮之后。

THE END
1.在jquery源码里添加过滤jQuery是一个快速、小巧且功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax等操作非活跃项1 活跃项2 实现代码如下: $("button").click(function() { $("div.itemhttps://blog.csdn.net/qq_35485206/article/details/144320655
2.jQuery最方便的前端验证方式2种(非空验证与比较验证)只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字 只能输入2位小数的浮点数 只能输入英文字符和数字 使用的jQuery地址: https://code.jquery.com/jquery-3.4.1.min.js 在线版本的,方式测试。 验证需求: 1、非空验证 当用户没有输入用户名就提交的时候【阻止提交】并提示相应文字。 https://cloud.tencent.com/developer/article/2258819
3.jqueryvalidate非空验证js非空正则表达式jquery validate非空验证 js 非空正则表达式 表单验证+正则表达式 一、非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法。写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0。 //文本框,用户输入内容。onblur是鼠标失去焦点时触发。 https://blog.51cto.com/u_16099333/9092089
4.BootstrapValidator指南MrBird其中需要注意的是jQuery版本必须大于1.9.1。文件下载地址:https://drive.google.com/open?id=1FVhZT899gewytpLVTwD-4x2uR1tSXFkN。 需要校验的表单必须由标签包裹,并且需要验证的字段由包裹,并且有name属性。比如: 1 2 3 4 5 6 labelName 绑定校验规则 对https://mrbird.cc/BootstrapValidator%E6%8C%87%E5%8D%97.html
5.提交表单时input字段非空验证需求,当提交表单的时候,如果要验证的字段为空,则弹出提示框提示请完善表单信息,并且 return;不执行下一步。 <!DOCTYPE HTML>名称*https://www.jianshu.com/p/d4a85f974a2c
6.JavaScript中float和非空的验证JavaScript 中 float 和非空的验证Html5 慕尼黑5688855 2023-12-11 15:25:59 我是网络开发领域的新手,我从基本的应用程序开始。我正在制作一个简单的网页来添加两个数字,并尝试执行一些基本验证,输入字段不能为空,并且输入只能是浮点数。我的index.html:<!doctype html> <!-- Required meta tags --> <!https://www.imooc.com/wenda/detail/732132
7.jqTel验证jqueryjs校验Tel格式你就change事件时做一个判断值不为空就执行。 把这两个input全部获取,取值判断就可以咯。 如何用jquery验证文本框只能输入字母数字和下划线 1、只能输入由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$。只能输入由数字、26个英文字母或者下划线组成的字符串:^\w+$。 http://chengdu.cdxwcx.cn/article/dichhjo.html
8.SpringBoot.md·WangBei1006/myNotes常用的字段验证注解: @NotEmpty 被注释的字符串的不能为 null 也不能为空 @NotBlank 被注释的字符串非 null,并且必须包含一个非空白字符 @Null 被注释的元素必须为 null @NotNull 被注释的元素必须不为 null @AssertTrue 被注释的元素必须为 true @AssertFalse 被注释的元素必须为 false @Pattern(regex=,flahttps://gitee.com/WangBei1006/myNotes/blob/master/SpringBoot.md
9.jQuery验证码插件verify常规验证码、滑动验证码、拼图验证码、选字验证码https://www.jq22.com/jquery-info16711
10.jquery.validator.js文件下载软件标签:jquery表单验证插件 jquery.validator.js插件是插件内部实现一些非空,正则格式,邮箱,url等判断的实用性插件,在input标签上添加启动这些验证方法对应的参数就可以了,类似插件中会自动扫描input。有需要的朋友可以来试用使用! jquery.validator.js使用方法: http://www.downyi.com/downinfo/45873.html
11.jquery内置验证(validate)使用方法示例(表单验证)jQuery验证框架jquery.validate.js说明文档 手册 上传者:consunyou时间:2010-09-09 JQueryValidate验证说明 jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持。 https://www.iteye.com/resource/weixin_38665822-13053708