jQuery Validate
Posted CY007
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Validate相关的知识，希望对你有一定的参考价值。
jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。
该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使
用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 J?rn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit(量子系统) 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
CY提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
1.导入 js 库（使用提供的CDN）
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
|
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js">
|
</script>
|
插件描述：Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，html、CSS与JS之间的低耦合能让您自由布局
和丰富样式，支持input,select,textarea的验证。
Description
浏览器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser
jQuery版本：1.7.0+
2.Usage
载入jQuery、validate
<script type="text/javascript" src="jquery-1.11.1.js"></script>
|
|
<script type="text/javascript" src="jquery-validate.js"></script>
|
3.DOM标签验证规则填写
<div class="form_control">
<input class="required" value="[email protected]" type="text" name="email" data-tip="请输入您的邮箱"
data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
<select class="required" data-valid="isNonEmpty" data-error="省份必填">
<option value="">请选择省份</option>
<option value="001">001</option>
<option value="002">002</option>
</select>
</div>
- 给需要验证的表单元素的class填入required（不建议在这个class上做其他样式）。
- 建议input用独立div包裹，因为验证的message是从当前input的父元素上append生成。
- data-tip：在尚未验证而获取焦点时出现的提示。
- data-valid：验证规则，若有组合验证，以||符号分割。
- data-error：验证错误提示，对应data-valid，以||符号分割。
- 单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。
<div class="form_control">
<span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<label><input type="radio" name="sex">未知</label>
</span>
</div>
<div class="form_control">
<span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
<label><input type="checkbox" name="label">红</label>
<label><input type="checkbox" name="label">绿</label>
<label><input type="checkbox" name="label">蓝</label>
</span>
</div>
JS调用
//**注意：必须以表单元素调用validate**
$(‘form‘).validate({
type:{
isChecked: function(value, errorMsg, el) {
var i = 0;
var $collection = $(el).find(‘input:checked‘);
if (!$collection.length) {
return errorMsg;
}
}
},
onFocus: function() {
this.parent().addClass(‘active‘);
return false;
},
onBlur: function() {
var $parent = this.parent();
var _status = parseInt(this.attr(‘data-status‘));
$parent.removeClass(‘active‘);
if (!_status) {
$parent.addClass(‘error‘);
}
return false;
}
});
| Method | Params | Type | Description |
| onFocus | arguments => event | Function | 获取焦点时的callback |
| onBlur | arguments => event | Function | 失去焦点时的callback |
| onChange | arguments => event | Function | 触发change的callback |
| type | 自定义验证规则，参数顺序：value,errorMsg,el | ||
表单提交前的验证
$(‘form‘).on(‘submit‘, function(event) {
event.preventDefault();
$(this).validate(‘submitValidate‘); //return true or false;
});
以上是关于jQuery Validate的主要内容，如果未能解决你的问题，请参考以下文章