造了个轮子-[Validator,基于jquery的验证器]
发布于 10 年前 作者 klamtlne 6392 次浏览 最后一次编辑是 8 年前 来自 分享

Validator

Validator是一个基于jQuery的验证器,验证成功后在回调函数中返回验证的健值对儿,极大的方便了表单验证+提交



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)
	})
10 回复

帮顶!有时间看看

一个表单多条规则怎么写?,比如 密码是数字+字母 而且 长度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

好动西,帮忙顶一下

@shy2850

晚点看看,最近再看 angular 的 form validate

回到顶部