上面的代码中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表单验证的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。