bob体育官方平台
bob体育appjQuery validate验证插件使用详解_jquery_脚本之家

Validate验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。

jQuery.Validate验证库1、下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载

Description

默认校验规则复制代码 代码如下:required:true 必输字段remote:"check.php" 使用ajax方法调用check.php验证输入值email:true 必须输入正确格式的电子邮件url:true 必须输入正确格式的网址date:true 必须输入正确格式的日期dateISO:true 必须输入正确格式的日期,例如:2009-06-23,1998/01/22 只验证格式,不验证有效性number:true 必须输入合法的数字digits:true 必须输入整数creditcard: 必须输入合法的信用卡号equalTo:"#field" 输入值必须和#field相同accept: 输入拥有合法后缀名的字符串maxlength:5 输入长度最多是5的字符串minlength:10 输入长度最小是10的字符串rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")range:[5,10] 输入值必须介于 5 和 10 之间min:10 输入值不能小于10默认的提示复制代码 代码如下: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 .", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", 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}.") },如需要修改,将以下js代码保存为:messages_cn.js,并在页面中引用: 复制代码 代码如下:

浏览器支持:IE7+ 、Chrome、Firefox、Safari、Mobile Browser

复制代码 代码如下:jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 .", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format, min: jQuery.validator.format;使用方式1、将校验规则写到控件中复制代码 代码如下:

jQuery版本:1.7.0+

使用的方式,必须引入包:jquery.metadata.js

Usage载入jQuery、validate

可以使用如下的方法,修改提示内容 复制代码 代码如下:上面代码表示:如果firstname域不填写任何内容,则提示:请输入内容。那么,如果填写的内容长度小于5的话,提示用户,该如何写呢?请看下面代码:复制代码 代码如下:注意:在使用equalTo关键字时,后面的内容必须加上引号,如下代码: 复制代码 代码如下:另外一个方式,使用关键字:meta

DOM标签验证规则填写

例如,将上面示例中的代码改为关键字meta形式,代码如下:复制代码 代码如下:

   请选择省份 001 002 

注意:

给需要验证的表单元素的class填入required。建议input用独立div包裹,因为验证的message是从当前input的父元素上append生成。data-tip:在尚未验证而获取焦点时出现的提示。data-valid:验证规则,若有组合验证,以||符号分割。data-error:验证错误提示,对应data-valid,以||符号分割。单选/复选比较特殊,需要添加元素包裹单选/复选集合,并在包裹元素上加验证规则。

规则部分应用完整形式,如下所示:

  男 女 未知   红 绿 蓝 

//**注意:必须以表单元素调用validate** $.validate({ type:{ isChecked: function { var i = 0; var $collection = $.find; if  { return errorMsg; } } }, onFocus: function.addClass; return false; }, onBlur: function() { var $parent = this.parent(); var _status = parseInt(this.attr; $parent.removeClass; if  { $parent.addClass; } return false; } });

正确写法:复制代码 代码如下:错误写法: 复制代码 代码如下:再有一种方式 复制代码 代码如下:$.metadata.setType;这样可以使用validate="{required:true}"的方式,或者,但将不起作用

表单提交前的验证

例如,将上面示例代码改为:复制代码 代码如下:

 $.on('submit', function { event.preventDefault.validate; //return true or false; });

注意:规则部分应用完整形式,即

validate内置验证规则

正确写法:复制代码 代码如下:错误写法: 复制代码 代码如下:2、将校验规则写到代码中复制代码 代码如下:

返回顶部