jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总

您所在的位置：网站首页 › jquery自定义表单 › jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总

jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总

2023-07-22 18:35| 来源: 网络整理| 查看: 265

文章目录 jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总1. jQuery Validate导入 js 库（使用CDN）默认校验规则默认提示使用方式1、将校验规则写到控件中2、将校验规则写到 js 代码中常用方法及注意问题1、用其他方式替代默认的 SUBMIT2、debug，只验证不提交表单3、ignore：忽略某些元素不验证4、更改错误信息显示的位置5、更改错误信息显示的样式6、每个字段验证通过执行函数7、验证的触发方式修改8、异步验证9、添加自定义校验10、radio 和 checkbox、select 的验证（required） 2. jQuery.validate 中文 APIValidator内置验证方式==validate ()的可选项==addMethod(name,method,message)方法meta String 方式 3. 实例演示虚构的实例现实世界的实例

总结：

Validate

required: “这是必填字段”

remote: “请修正此字段”,

equalTo: “你的输入不相同”,

extension: “请输入有效的后缀”,

submitHandler函数：

表单验证validate中的表单提交函数，可结合AJAX通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。

debug:true

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

required

radio 的 required 表示必须选中一个。checkbox 的 required 表示必须选中。select 的 required 表示选中的 value 不能为空。

Validator

resetForm() 把前面验证的 FORM 恢复到验证前原来的状态。

setDefaults(defaults) 改变默认的设置。

messages：自定义的提示信息

groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。

success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

highlight：可以给未通过验证的元素加效果、闪烁等。

HTML

HTML 标签

health information height: weight:

fieldset 元素可将表单内的相关元素分组。

标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

标签没有必需的或唯一的属性。

标签为 fieldset 元素定义标题。

HTML 标签

legend 元素为 fieldset 元素定义标题（caption）。在数据周围绘制一个带标题的框。

radio

type 属性可返回单选按钮的表单元素类型。对于==单选按钮，==该属性总是 “radio”。 1. jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。

目前版本是 1.19.3。

访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

导入 js 库（使用CDN）默认校验规则序号规则描述1required:true必须输入的字段。2remote:“check.php”使用 ajax 方法调用 check.php 验证输入值。3email:true必须输入正确格式的电子邮件。4url:true必须输入正确格式的网址。5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。7number:true必须输入合法的数字（负数，小数）。8digits:true必须输入整数。9creditcard:必须输入合法的信用卡号。10equalTo:"#field"输入值必须和 #field 相同。11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。15range:[5,10]输入值必须介于 5 和 10 之间。16max:5输入值不能大于 5。17min:10输入值不能小于 10。默认提示

Query Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：

你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：

使用方式 1、将校验规则写到控件中 $.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } }); $().ready(function() { $("#commentForm").validate(); }); 输入您的名字，邮箱，URL，备注。 Name (必需, 最小两个字母) E-Mail (必需) URL (可选) 备注 (必需) 2、将校验规则写到 js 代码中

这是写的validate表单验证代码：

$().ready(function() { // 在键盘按下并释放及提交后验证提交表单 $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "请输入您的名字", lastname: "请输入您的姓氏", username: { required: "请输入用户名", minlength: "用户名必需由两个字符组成" }, password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字符" }, confirm_password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字符", equalTo: "两次密码输入不一致" }, email: "请输入一个正确的邮箱", agree: "请接受我们的声明", topic: "请选择两个主题" } }) });

messages 处，如果某个控件没有 message，将调用默认的信息。

下面是我们需要操作的表单：

验证完整的表单名字姓氏用户名密码验证密码 Email 请同意我们的声明我乐意接收新信息主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见 Marketflash Latest fuzz Mailing list digester Please select at least two topics you'd like to receive.

required: true 值是必须的。 required: “#aa:checked” 表达式的值为真，则需要验证。 required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

常用方法及注意问题 1、用其他方式替代默认的 SUBMIT $().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("提交事件!"); form.submit(); } }); });

使用 ajax 方式

$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({ submitHandler: function(form) { alert("提交事件!");form.submit(); } });

如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() { $("#signupForm").validate({ debug:true }); });

如果一个页面中有多个表单都想设置成为 debug，则使用：

$.validator.setDefaults({ debug: true }) 3、ignore：忽略某些元素不验证 ignore: ".ignore" 4、更改错误信息显示的位置 errorPlacement：Callback

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) { error.appendTo(element.parent()); }

实例：

将错误信息放在 label 元素后并使用 span 元素包裹它

菜鸟教程(runoob.com) $.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } }); $().ready(function() { // 提交时验证表单 var validator = $("#form1").validate({ errorPlacement: function(error, element) { // Append error within linked label $( element ) .closest( "form" ) .find( "label[for='" + element.attr( "id" ) + "']" ) .append( error ); }, errorElement: "span", messages: { user: { required: " (必需字段)", minlength: " (不能少于 3 个字母)" }, password: { required: " (必需字段)", minlength: " (字母不能少于 5 个且不能大于 12 个)", maxlength: " (字母不能少于 5 个且不能大于 12 个)" } } }); $(".cancel").click(function() { validator.resetForm(); }); }); .error{ color:red; } 登录框用户名密码

代码的作用是：一般情况下把错误信息显示在中，如果是 radio 则显示在中，如果是 checkbox 则显示在内容的后面。

参数类型描述默认值errorClassString指定错误提示的 css 类名，可以自定义错误提示的样式。“error”errorElementString用什么标签标记错误，默认是 label，可以改成 em。“label”errorContainerSelector显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。 errorContainer: “#messageBox1, #messageBox2”errorLabelContainerSelector把错误信息统一放在一个容器里面。wrapperString用什么标签再把上边的 errorELement 包起来。

一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏。

errorContainer: "div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li" 5、更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个 validation.css，专门用于维护校验文件的样式。

input.error { border: 1px solid red; } label.error { background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background:url("./demo/images/checked.gif") no-repeat 0px 0px; } 6、每个字段验证通过执行函数 success：String,Callback

要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

success: function(label) { // set ; as text for IE label.html(";").addClass("checked"); //label.addClass("valid").text("Ok!") }

添加 “valid” 到验证元素，在 CSS 中定义的样式。

success: "valid" 7、验证的触发方式修改

下面的虽然是 boolean 型的，但建议除非要改为 false，否则别乱添加。

触发方式类型描述默认值onsubmitBoolean提交时验证。设置为 false 就用其他方法去验证。trueonfocusoutBoolean失去焦点时验证（不包括复选框/单选按钮）。trueonkeyupBoolean在 keyup 时验证。trueonclickBoolean在点击复选框和单选按钮时验证。truefocusInvalidBoolean提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。truefocusCleanupBoolean如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。false // 重置表单 $().ready(function() { var validator = $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); $("#reset").click(function() { validator.resetForm(); }); }); 8、异步验证 remote：URL

使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: "check-email.php" remote: { url: "check-email.php", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }

远程地址只能输出 “true” 或 “false”，不能有其他输出。

9、添加自定义校验 addMethod：name, method, message

自定义验证方法

// 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i length++; } } return this.optional(element) || ( length >= param[0] && length if(value.length>1){ return false; } if(value>=params[0] && value return false; } },"必须是一个字母,且a-f");

如果有个表单字段的 name=“username”，则在 rules 中写：

username:{ af:["a","f"] }

addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。 addMethod 的第三个参数，是自定义的错误提示，这里的提示为:“必须是一个字母,且a-f”。 addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。

如果只有一个参数，直接写，比如 af:“a”，那么 a 就是这个唯一的参数，如果多个参数，则写在 [] 里，用逗号分开。

meta String 方式 $("#myform").validate({ meta:"validate", submitHandler:function() { alert("Submitted!") } }) 3. 实例演示虚构的实例错误消息容器自定义消息作为元素数据radio（单选按钮）、checkbox（复选按钮）和 select（下拉框）与表单（Form）插件的交互（AJAX 提交）自定义方法和消息显示动态表单使用 jQuery UI Themeroller 定义表单样式TinyMCE - 一个轻量级的基于浏览器的所见即所得编辑器文件输入框jQuery Mobile 表单验证现实世界的实例 Milk 注册表单Marketo 注册表单房屋买卖折叠面板表单远程 CAPTCHA（验证码）验证

【本文地址】

jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总

jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总

今日新闻

推荐新闻