实例详解jQuery表单验证插件validate(2)

日期：2020-06-10 栏目：程序人生浏览：次

下面是默认的验证提示，官网有简体中文版的验证提示下载，或者通过jQuery.extend(jQuery.validator.messages自定义错误提示信息，可以将网站的验证提示文本统一到一个文件里。

required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.")

使用方式

1：

在控件中使用默认验证规则，例子：

电子邮件(必填)

2：

可以在控件中自定义验证规则，例子：

自定义(必填,[3,5])

通过javascript自定义验证规则，下面的JS自定义了两个规则，password和confirm_password

$().ready(function() { $("#form2").validate({ rules: { password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { password: { required: "没有填写密码", minlength: jQuery.format("密码不能小于{0}个字符") }, confirm_password: { required: "没有确认密码", minlength: "确认密码不能小于{0}个字符", equalTo: "两次输入密码不一致嘛" } } }); });

required除了设置为true/false之外，还可以使用表达式或者函数，比如

$("#form2").validate({ rules: { funcvalidate: { required: function() {return $("#password").val()!=""; } } }, messages: { funcvalidate: { required: "有密码的情况下必填" } } });

Html

密码<input type="password" /> 确认密码<input type="password" /> 条件验证<input value="" />

4：

使用meta自定义验证信息

首先用JS设置meta

$("#form3").validate({ meta: "validate" });

Html

email<input/>

使用meta可以将验证规则写在自定义的标签内，比如validate

JS设置meta

$().ready(function() { $.metadata.setType("attr", "validate"); $("#form1").validate(); });

Html

自定义验证规则

对于复杂的验证，可以通过jQuery.validator.addMethod添加自定义的验证规则

官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等

例子

// 字符验证 jQuery.validator.addMethod("userName", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "用户名只能包括中文字、英文字母、数字和下划线"); //然后就可以使用这个规则了 $("#form1").validate({ // 验证规则 rules: { userName: { required: true, userName: true, rangelength: [5,10] } }, /* 设置错误信息 */ messages: { userName: { required: "请填写用户名", rangelength: "用户名必须在5-10个字符之间" } }, });

radio、checkbox、select的验证方式类似

radio的验证

性别

checkbox的验证

最少选择两项

select的验证

下拉框

Ajax验证

用remote可以进行Ajax验证

remote: { url: "url", //url地址 type: "post", //发送方式 dataType: "json", //数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); }} }

Plugin methods

Name Type

validate( options ) Returns: Validator

验证所选的FORM

valid( ) Returns: Boolean

检查是否验证通过

rules( ) Returns: Options

返回元素的验证规则

rules( "add", rules ) Returns: Options

增加验证规则

rules( "remove", rules ) Returns: Options

删除验证规则

removeAttrs( attributes ) Returns: Options

删除特殊属性并且返回他们

Custom selectors
Name Type

:blank Returns: Array <Element >
没有值的筛选器

:filled Returns: Array <Element >
有值的筛选器

:unchecked Returns: Array <Element >
没选择的元素的筛选器
Utilities

Name Type

jQuery.format( template, argument , argumentN... ) Returns: String
用参数代替模板中的 {n}。
Validator

validate方法返回一个Validator对象, 它有很多方法，让你能使用引发校验程序或者改变form的内容.

下面只是列出常用的.

form( ) Returns: Boolean
验证form返回成功还是失败

element( element ) Returns: Boolean
验证单个元素是成功还是失败

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

showErrors( errors ) Returns: undefined
显示特定的错误信息
built-in Validation methods

Name Type

setDefaults( defaults ) Returns: undefined
改变默认的设置

addMethod( name, method, message ) Returns: undefined
添加一个新的验证方法. 必须包括名字，一个JAVASCRIPT方法和一个默认的信息

addClassRules( name, rules ) Returns: undefined
增加组合验证类型

addClassRules( rules ) Returns: undefined
增加组合验证类型
built-in Validation methods

Name Type

required( ) Returns: Boolean
必填验证元素

required( dependency-expression ) Returns: Boolean
必填元素依赖于表达式的结果.

required( dependency-callback ) Returns: Boolean
必填元素依赖于回调函数的结果.

remote( url ) Returns: Boolean
请求远程校验。url通常是一个远程调用方法

minlength( length ) Returns: Boolean
设置最小长度

maxlength( length ) Returns: Boolean
设置最大长度

rangelength( range ) Returns: Boolean
设置一个长度范围[min,max]

min( value ) Returns: Boolean
设置最小值.

max( value ) Returns: Boolean
设置最大值.

range( range ) Returns: Boolean
设置值的范围

email( ) Returns: Boolean
验证电子邮箱格式

url( ) Returns: Boolean
验证连接格式

date( ) Returns: Boolean
验证日期格式(类似30/30/2008的格式，不验证日期准确性只验证格式)

dateISO( ) Returns: Boolean
研制ISO类型的日期格式

dateDE( ) Returns: Boolean
验证德式的日期格式（29.04.1994 or 1.1.2006）

number( ) Returns: Boolean
验证十进制数字（包括小数的）

numberDE( ) Returns: Boolean
Makes the element require a decimal number with german format.

digits( ) Returns: Boolean
验证整数

creditcard( ) Returns: Boolean
验证信用卡号

accept( extension ) Returns: Boolean
验证相同后缀名的字符串

equalTo( other ) Returns: Boolean
验证两个输入框的内容是否相同

自定义jquery-validate的验证行为

1: 自定义表单提交

设置submitHandler来自定义表单提交动作

$(".selector").validate({ submitHandler: function(form) { alert("验证通过"); } });

如果需要提交表单，可以调用
form.submit(); 或者$(form).ajaxSubmit();

2: 调试模式

将debug设置为true，表单不会提交，只进行检查，方便调试

$(".selector").validate({ debug: true })

3: 设置validate的默认值

使用setDefaults可以设置validate的默认值，比如默认所有表单验证都是在debug模式下进行

$.validator.setDefaults({ debug: true })

4: 某些元素不验证

设置ignore属性可以忽略某些元素不验证

$(".selector").validate({ ignore: "ignore" })

5: 验证时机

jquery.validate可以很方便的设置在什么时候触发验证动作

onsubmit: 提交时是否验证

$(".selector").validate({ onsubmit: false })

onfocusout: 失去焦点时验证(checkboxes/radio除外)

$(".selector").validate({ onfocusout: false })

onkeyup: 在keyup时验证

$(".selector").validate({ onkeyup: false })

onclick: 在checkboxes、radio点击时验证.

$(".selector").validate({ onclick: false })

6: 重写验证规则和验证提示信息

转载注明出处：https://www.heiqu.com/wgwdjx.html

实例详解jQuery表单验证插件validate(2)

相关推荐