jQuery验证插件validate.js
华萧迟
validate.js介绍
Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea`的验证。
validate.js兼容性
jQuery兼容：兼容jQuery1.7以上的版本- 浏览器兼容：兼容
IE7以上，Chrome，Firefox，Opera，Safari，Mobile Browser
validate.js使用
- 首先是组要载入相关的资源文件，主要是
jquery.js 和 validate.js，如下代码：
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
- 然后是是
Dom标签验证规则的填写，代码如下：
<div class="form_control">
<input class="required" value="315359131@qq.com" 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>
- 最后还有JavaScript调用相关方法等，代码如下：
//**注意：必须以表单元素调用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;
}
});
Validate.js相关方法列表如下：
| 方法 | 语法 | 类型 | 说明 |
|---|---|---|---|
| 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;
});
validate.js完整使用实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
font: 14px/1.2 "微软雅黑";
}
div {
width: 300px;
position: relative;
margin: 20px 0;
padding: 5px 10px;
}
.form_control {
border: 1px #ccc solid;
}
input[type="text"],
input[type="password"] {
border: none;
width: 100%;
}
.form_control.active {
border: 1px #32BC61 solid;
background-color: #fff;
}
.form_control.error {
border: 1px #f00 solid;
background-color: #FBF9BB;
}
.form_control.error input[type="text"],
.form_control.error input[type="password"] {
background-color: #FBF9BB;
color: #f00;
}
input[type="text"]:focus,
input[type="password"]:focus {
border: none;
outline: none;
}
.form_control .valid_message {
color: #32BC61;
position: absolute;
left: 325px;
top: 5px;
width: 200px;
}
.form_control.error .valid_message {
color: #f00;
}
.form_control.success .valid_message {
background: url(sucess.png) no-repeat;
left: auto;
right: 5px;
top: 4px;
width: 16px;
height: 16px;
}
.none {
display: none;
}
</style>
</head>
<body>
<form>
<div class="form_control">
<input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱"
data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
<input class="required" value="123456789" type="password" data-tip="请输入您的密码"
data-valid="isNonEmpty||between:6-16" data-error="密码不能为空||密码长度6-16位" name="nickname">
</div>
<div class="form_control">
<input class="required" value="王大锤" type="text" name="email" data-tip="请输入您的姓名"
data-valid="isNonEmpty||onlyZh||between:2-5" data-error="姓名不能为空||姓名只能为中文||姓名长度为2-5位">
</div>
<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>
<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>
<option value="003">003</option>
<option value="004">004</option>
<option value="005">005</option>
<option value="006">006</option>
<option value="007">007</option>
<option value="008">008</option>
<option value="009">009</option>
<option value="010">010</option>
</select>
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
<script type="text/javascript">
$('form').validate({
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;
}
});
$('form').on('submit', function (event) {
event.preventDefault();
$(this).validate('submitValidate'); //return boolean;
});
</script>
</body>
</html>
标题validate.js插件相关资源离线下载
地址：validate.js相关资源下载 提取码为：7b2p
类似资料：