Validator
Validator是一个基于jQuery的验证器,验证成功后在回调函数中返回验证的健值对儿,极大的方便了表单验证+提交
- Live DEMO http://klamtlne.github.io/Validator/
- Github https://github.com/klamtlne/Validator
- 欢迎issuses,PR,接下来准备增加验证类型和自定义验证条件,以及更加友好的报错
Usage
<form id="form">
<input type="text" data-validator="name" data-rules="notEmpty, maxLength=10">
<input type="password" data-validator="password" data-rules="notEmpty, minLength=6">
<input type="email" data-validator="email" data-rules="notEmpty, email">
<input type="text" data-validator="phone" data-rules="phone">
<input type="checkbox" data-validator="fruit" value="apple" data-rules="atLeast=1, atMost=2">
<input type="checkbox" data-validator="fruit" value="pear">
<input type="checkbox" data-validator="fruit" value="lemon">
<select data-validator="selection" data-rules="notEmpty">
<option value="1"></option>
<option value="2"></option>
</select>
</form>
var config = {
msg: {
name: {
notEmpty: "name can’t be empty",
maxLength: "name can't be more than 10 characters"
},
password: {
minLength: "password can’t be less than 6 characters"
}
// other messages goes here...
}
}
$("#form").valdiate(config, function (result, data) {
// if success: result = {pass: true}
// data = {name: xxx, password: xxx, email: xxx...}
// if fail: {pass: false, msg: xxx}
// data = undefined
console.log(result)
})
顶个吧。
@fengxiaolong thanks ! T_T
帮顶!有时间看看
一个表单多条规则怎么写?,比如 密码是数字+字母 而且 长度6-20之间 而且排除123456 这种简单的密码 一共3条规则
@yakczh 分开回答,多条规则写在data-rules中:<input data-rules=“notEmpty, minLength=6, maxLength=20”>,数字+字母 & 排除简单规则我可能会加上前者,后者这种类型我觉得提供接口给开发者自定义规则比较好
jQuery 支持将 data-validater=’{“required”:true,“max-length”:20}’ 标准的json字符串直接转化成对象格式, 你完全可以将所有简单验证参数写到一个里面。 用jQuery.fn.data(‘validater’) 就取到对象了。
@shy2850 还能这样呀,学习了,下一次更新考虑加进去。不过这里我希望返回健值对儿和定位错误的input/select,所以还是要多声明一个data-name的属性。
@klamtlne
其实我刚刚开始玩jQuery的时候也写过一个用了几年了 ,
因为以前做金融行业表单,验证太过复杂了,
https://github.com/shy2850/xhcms_2014/blob/master/js/jquery-form/form-valid.js
它的特点在于把验证过程分成了before-begin-valid-success/failed-end-after 这些环节,支持配置统一的验证提示、验证参数的层叠附加等。 下面是它的一些demo,比较早了,近两年没有再整理 http://i.webfuture.cn/formValid/index.html http://i.webfuture.cn/formValid/001.html http://i.webfuture.cn/formValid/002.html 。。。 http://i.webfuture.cn/formValid/006.html http://i.webfuture.cn/formValid/007.html
好动西,帮忙顶一下
晚点看看,最近再看 angular 的 form validate