转自：https://github.com/jaywcjlove/validator.js
轻量级的JavaScript表单验证，字符串验证。没有依赖，支持UMD
导入js库
<script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script>
简单.js验证
// 字符串验证
var validator = require('validator.tool');
var v = new validator();
v.isEmail('wowohoo@qq.com');
v.isIp('192.168.23.3');
v.isFax('');
// 表单验证
var a = new validator('example_form',[
{...}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
表单验证：
<form id="example_form">
<div>
<label for="email">邮箱验证</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="passworld">密码:</label>
<input type="passworld" name="passworld" id="passworld" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="repassworld">确认密码:</label>
<input type="repassworld" name="repassworld" id="repassworld" class="form-control" placeholder="输入密码">
</div>
</form>
<script type="text/javascript">
var validator = new Validator('example_form',[
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_emil|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
},{
name:"passworld",
display:"必填",
rules: 'required'
},{
name:"repassworld",
display:"密码不一致",
rules: 'same(passworld)'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
</script>
说明文档：
new Validator(formName, option, callback)
forname: 是标签中<form> 中的 id 或者 name 的值，如上面的example_form
option：
-
name-> input 中name对应的值 -
display-> 验证错误要提示的文字{{这个中间是name对应的值}} -
rules-> 一个或多个规则(中间用|间隔)is_email-> 验证合法邮箱is_ip-> 验证合法 ip 地址is_fax-> 验证传真is_tel-> 验证座机is_phone-> 验证手机is_url-> 验证URLis_money-> 金额格式验证is_english-> 字母验证⚠️is_chinese-> 中文验证is_percent-> 验证百分比⚠️required-> 是否为必填max_length-> 最大字符长度min_length-> 最小字符长度same(field)-> 指定字段内容是否相同different(field)-> 拒绝与某个字段相等,比如登录密码与交易密码情况contains(field)-> 直接判断字符串是否相等accepted(field)-> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
例如：
{ //name 字段 name: 'email', display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短", // 验证条件 rules: 'is_email|max_length(12)' // rules: 'valid_email|required|max_length(12)|min_length(2)' }
自定义正则：以regexp_开始
{
//name 字段
name: 'sex',
// 对应下面验证提示信息
display:"请你选择性别{{sex}}|请输入数字",
//自定义正则`regexp_num`
regexp_num:/^[0-9]+$/,
// 验证条件，包括应用自定义正则`regexp_num`
rules: 'required|regexp_num'
}
remote：URL 异步验证
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
示例一： remote: "check-email.php" 示例二： remote: { url: "check-email.php", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }
自定义验证方法
addMethod（name, method, message）
// 中文字两个字节 jQuery.validator.addMethod( "byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || (length >= param[0] && length <= param[1]); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)") ); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码");
默认规则：(1)、required:true 必输字段 (2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值 (3)、email:true 必须输入正确格式的电子邮件 (4)、url:true 必须输入正确格式的网址 (5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用 (6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 (7)、number:true 必须输入合法的数字(负数，小数) (8)、digits:true 必须输入整数 (9)、creditcard:true 必须输入合法的信用卡号 (10)、equalTo:"#password" 输入值必须和#password相同 (11)、accept: 输入拥有合法后缀名的字符串（上传文件的后缀） (12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符) (14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)、range:[5,10] 输入值必须介于 5 和 10 之间 (16)、max:5 输入值不能大于5 (17)、min:10 输入值不能小于10