十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍“jQuery表单验证的代码怎么写”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。
松滋ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
在使用jquery-validate.js插件时可以做一些初始化配置
在初始化jquery-validate.js对象的时候,将外部的一些配置和该插件内部的一些默认配置合并在一起,如果有相同的配置,前者覆盖后者(默认)的配置
// Constructor for validator $.validator = function( options, form ) { this.settings = $.extend( true, {}, $.validator.defaults, options ); this.currentForm = form; this.init(); };
标准格式是 key为字符串,value为对象字面直接量
rules : { username: { required: true, minlength: 2 } }
也可以是
key为字符串,value也为特定的字符串(“required”)
ulus: { username: "required" }
在插件中会将上面格式调整为:{required:true}的形式。从下面代码可以看出对于usernname:”minlength”就不适用了,它会把它变成{minlength:true}这规则明显不合适
// Converts a simple string to a {string: true} rule, e.g., "required" to {required:true} normalizeRule: function( data ) { if ( typeof data === "string" ) { var transformed = {}; $.each( data.split( /\s/ ), function() { transformed[ this ] = true; } ); data = transformed; } return data; }
jquery-validate.js将这些规则解析后放到rules这个对象用以供校验时访问
在指定的元素上添加事件监听
$( this.currentForm ) .on( "focusin.validate focusout.validate keyup.validate", ":text, [type='password'], [type='file'], select, textarea, [type='number'], [type='search'], " + "[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], " + "[type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'], " + "[type='radio'], [type='checkbox'], [contenteditable], [type='button']", delegate ) // Support: Chrome, oldIE // "select" is provided as event.target when clicking a option .on( "click.validate", "select, option, [type='radio'], [type='checkbox']", delegate )
上面的监听事件看起来很奇怪,用空格分隔,外加命名空间,如果不了解on的这些使用方法可以参考Query.on() 函数详解。之前focusin,focusout,keyup都是标准事件,之前一直以为focusin与focusout是自定义的事件,这里需要注意一下。
监听函数处理
function delegate( event ) { // Set form expando on contenteditable if ( !this.form && this.hasAttribute( "contenteditable" ) ) { this.form = $( this ).closest( "form" )[ 0 ]; } var validator = $.data( this.form, "validator" ), eventType = "on" + event.type.replace( /^validate/, "" ), settings = validator.settings; if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) { settings[ eventType ].call( validator, this, event ); } }
在插件中的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
JQuery-validation demo | Bootstrap
上面的代码中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 )
// Prevent submit for invalid forms or custom submit handlers if ( validator.cancelSubmit ) { validator.cancelSubmit = false; return handle(); } if ( validator.form() ) { //校验表单成功 if ( validator.pendingRequest ) { validator.formSubmitted = true; return false; } return handle(); } else { validator.focusInvalid(); return false; }
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来决定表单是否提交。
function handle() { //提交表单 var hidden, result; if ( validator.settings.submitHandler ) { if ( validator.submitButton ) { // Insert a hidden input as a replacement for the missing submit button hidden = $( "" ) .attr( "name", validator.submitButton.name ) .val( $( validator.submitButton ).val() ) .appendTo( validator.currentForm ); } result = validator.settings.submitHandler.call( validator, validator.currentForm, event ); if ( validator.submitButton ) { // And clean up afterwards; thanks to no-block-scope, hidden can be referenced hidden.remove(); } if ( result !== undefined ) { return result; } return false; } return true; }
生成一个hidden的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]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\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表单验证的代码怎么写”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。