最近在开发过程中又遇到了表单验证的问题，当然这也是不可避免的，用户输入哪个不需要前端验证的。
HTML5的自带表单验证也是早有耳闻，确实新的INPUT类型很好用，但是自带的表单验证必须在点击submit进行提交时才会触发，以至于在用Ajax提交表单的时候自带的表单验证会显得极其麻烦，并且不能实现随输入验证。
虽然不管是JQuery还是大神们写的表单验证组件都能很好地解决这个问题，但是还是想自己写一个，毕竟还是以学习为目的，光是用别人写过的东西会把自己用成一个 XX
好了，，下面进入正题
设计思想
这个表单验证组件的验证条件是以一个过滤器为单位的，每个输入元素都可以绑定一组过滤器，在验证的时候则依次运行每个过滤器，如果其中一个过滤器没有通过，则视为输入验证不通过并跳出验证。在验证时提供两个回掉函数，分别是验证通过和不通过时，在验证过后运行。
外界可以调用的函数为： 添加过滤器， 验证， 过滤输入
构造
formValidator()
没什么说的，就new就行
添加过滤器
Boolean setFilter(HTMLInputElement: inputElement, Object: options, Function?: exec)
这里的inputElement就是要绑定的输入元素，options是一系列关于过滤器的设置， exec则是在绑定自定义过滤器的时候需要的一个执行过滤的函数，传入的参数为要验证的内容
执行验证
Boolean check(HTMLInputElement: inputElement, Object: options)
inputElement是要验证的输入元素，
options是包含回掉函数的设置的一个对象， 包含两个成员函数
success: 成功后调用的函数，参数为当前的输入
error: 失败后调用的函数，参数为错误消息，即验证错误信息
过滤输入
Boolean filterInput(HTMLInputElement: inputElement, Object: options)
这个和check的用法一样，只是这个相当于是在keypress时间上绑定了验证过程
值得一提的是，在添加过滤器的设置里有一项是 locked, 这个代表了这个过滤器在过滤输入时是否有效，如果是false则在过滤输入时不考虑这个过滤器，也就是说当这个过滤器不满足时并不会阻止用户输入，但是依然会验证。
过滤器类型
requiredFilter
验证输入是否为空
options:
type: "required"
message: 用户自定义的验证提示信息
locked: true|false
patternFilter
根据一个正则表达式来验证输入的过滤器
options:
type: "pattern"
name: 默认正则表达式的名字
message: 用户自定义的验证提示信息
pattern: 一个用户自定义的正则表达式，如果默认的正则表达式不能满足需求则提供这个设置
locked: true|false
当前支持的正则规则：
numeric: 数字
integer: 整数
decimal: 小数
email: 检查是否为正确的Email格式
alpha: 英文字符
alphaNumeric: 英文字符或者数字
alphaDash: 英文字符或者破折号
natural: 自然数
naturalNoZero: 非0自然数
ip: 合法IP
base64: base64字符
numericDash: 数字或破折号
url: 合法url
twinsFilter
检查输入是否和另一个输入相同
options:
type: "twin"
bound: 另一个输入元素
message: 用户自定义的验证提示信息
locked: true|false
例
var validator = new formValidator();
validator.setFilter(input1, {
type: "required",
locked: true
});
validator.setFilter(input1, {
type: "pattern",
name: "email",
message: "请输入邮箱",
locked: true
});
validator.setFilter(input2, {
type: "required",
message: "请与上面输入保持一致",
locked: true
});
validator.setFilter(input2, {
type: "pattern",
name: "numeric",
message: "请输入数字",
locked: false
});
validator.setFilter(input2, {
type: "twin",
bound: input1,
message: "请与上面输入保持一致",
locked: true
});
validator.eventUtil.addHandler(input1, "input",
function (event) {
validator.check(input1, {
success: function () {
p1.innerHTML = "";
},
error: function (message) {
p1.innerHTML = message;
}
});
});
validator.eventUtil.addHandler(input2, "input",
function (event) {
validator.check(input2, {
success: function () {
p2.innerHTML = "";
},
error: function (message) {
p2.innerHTML = message;
}
});
});
/*validator.filterInput(input, {
success: function () {
p.innerHTML = "";
},
error: function (message) {
p.innerHTML = message;
}
});*/
总结
目前还有相当多的不足， 比如，只能实现类文本输入的过滤，对于select 和 radio 并不支持， 而且，能验证的正则表达式还差好多。
好在设计的时候把验证规则封装成了过滤器，这样在下一步扩展的时候省了不少事情
以后还打算添加一些例如日期相关过滤器，颜色过滤器，select过滤器等等，也希望大家看到这篇文章的可以给我留个言，，多多指教。
具体的代码就不这这里写了，大家想看的可以到github上看，只是注释都是英文，这也是我本人的一个习惯。
网友评论