jQuery表单验证的代码怎么写

这篇文章主要介绍“jQuery表单验证的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。
在使用jquery-validate.js插件时可以做一些初始化配置
在初始化jquery-validate.js对象的时候，将外部的一些配置和该插件内部的一些默认配置合并在一起，如果有相同的配置，前者覆盖后者（默认）的配置
标准格式是 key为字符串，value为对象字面直接量
也可以是
key为字符串，value也为特定的字符串（“required”）
在插件中会将上面格式调整为：{required:true}的形式。从下面代码可以看出对于usernname:”minlength”就不适用了，它会把它变成{minlength:true}这规则明显不合适
jquery-validate.js将这些规则解析后放到rules这个对象用以供校验时访问
在指定的元素上添加事件监听
上面的监听事件看起来很奇怪，用空格分隔，外加命名空间，如果不了解on的这些使用方法可以参考Query.on() 函数详解。之前focusin，focusout，keyup都是标准事件，之前一直以为focusin与focusout是自定义的事件，这里需要注意一下。
监听函数处理
在插件中的settings放置了事件处理函数（settings[ eventType ].call( validator, this, event );，也就是在defaults中定义的onfocusin，onfocusout，onkeyup，onclick，highlight，unhighlight事件，因为在defaults中所以可以在外部重写这些事件，做一些定制样式，这点会在最后重新封装一个适合自己的表单校验插件）
现在仔细探究一下这些自定义事件在插件中是如何工作的
先看一下jQuery提供的一个trigger() 方法
trigger() 方法触发被选元素的指定事件类型。
格式：$(selector).trigger(event,[param1,param2,…])
event 必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,…] 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
注意到了trigger可以触发bind函数绑定的事件（bind现在用on取代），也就是说只要我在on中定义一些自定义的事件，都是可以通过trigger触发
例子-trigger
上面的代码中on的第一个参数有两种事件，使用space隔开（这样两种事件都会绑定指定的事件处理函数），第二个参数指定了可以触发这个自定义事件的一些元素（满足选择器[type=’text’]，validate的元素），第三个参数是指定使用trigger触发这些事件时执行的处理函数
在接下来执行事件的触发，从代码中可以看到我选择对两个元素触发了不同的事件。
插件表单submit监听
插件绑定了submit的监听事件（.validate为命名空间），当我们通过$(“form”).submit() 或直接点击type=“submit”(input , button可以指定type=“submit”)触发submit事件时，会执行绑定好的处理函数
例子-绑定submit
this.on( “submit.validate”, function( event )
cancelSubmit
cancelSubmit 是validator对象的成员属性，当满足选择器”：submit”（input，button 的type为submit或者button没有指定类型多数浏览器会把button当做类型为 submit 的按钮）的按钮触发点击事件时，会查看这个按钮上是否包含class为“cancel”或者有formnovalidate=“formnovalidate”属性，如果按钮存在其中一种，那么就不会进行表单校验直接提交form表单（设置validator.cancelSubmit=true）。
validator.form()
使用validator.form()进行表单元素校验，如果为true，判断validator.pendingRequest是否为true，如果是则不提交form，如果false则执行handle函数（handle执行的是submitHandler（）的处理）
submitHandler
插件可以在外部配置submitHandler处理函数，它的意思就是在form表单提交时可以做一些额外的处理，并通过返回true，false来决定表单是否提交。
生成一个hidde免费云主机域名n的input隐藏域，在执行完submitHandler以后移除，没能明白这里的意图。 执行submitHandler后会有一个返回结果（true | false | undefined）,如果自定义的submitHandler没有return返回则结果是undefined,这样导致handle（）结果为false，表单不会被提交
插件表单校验的规则
email
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
1
url
/^(?:(?:(?:https?|ftp):)?//)(?:S+(?::S*)?@)?(?:(?!(?:10|127)(?:.d{1,3}){3})(?!(?:169.254|192.168)(?:.d{1,3}){2})(?!172.(?:1[6-9]|2d|3[0-1])(?:.d{1,3}){2})(?:[1-9]d?|1dd|2[01]d|22[0-3])(?:.(?:1?d{1,2}|2[0-4]d|25[0-5])){2}(?:.(?:[1-9]d?|1dd|2[0-4]d|25[0-4]))|(?:(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)(?:.(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)*(?:.(?:[a-zu00a1-uffff]{2,})).?)(?::d{2,5})?(?:[/?#]S*)?$/i
1
时间
!/Invalid|NaN/.test( new Date( value ).toString()
1
电话号码
/^(?:-?d+|-?d{1,3}(?:,d{3})+)?(?:.d+)?$/.test( value );
1
数字
/^d+$/.test( value )
1
minlength
minlength: function( value, element, param ) {
var length = $.isArray( value ) ? value.length : this.getLength( value, element );
return this.optional( element ) || length >= param;
},关于“jQuery表单验证的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: css中text文本属性怎么写

这篇文章将为大家详细讲解有关css中text文本属性怎么写，小编觉得挺实用的，因此分享给大家做个参考，免费云主机域名希望大家阅读完这篇文章后可以有所收获。 　　一、color文本颜色 　　写法：body｛color：red｝，h2{color:#ooffoo}…