2017-11-26
大家好,这里是我的第二篇博客! 今天来讲一下怎么用jQuery做一个表单验证,这里是成品地址.
表单验证的大致思路就是在input里添加一个按照一定语法写的自定义属性data-rule
,在输入框blur的时候通过不同的data-rule来验证其中的内容符不符合要求,如果不符合则弹出错误信息.
首先当然就是如何将data-rule解析成一个个规则,这里是将它由字符串变成一个对象rule{}
.
function parse_rule() {
// .data方法专门用于用于获取'data-'开头的属性字符串
// data-rule="min:18|maxlength:10"
const rule_string = $ele.data('rule'); // 相当于获取'data-rule'"
if (!rule_string)
return; // 没有rule
// .split()方法 分割
const rule_arr = rule_string.split('|'); // 返回一个数组
// rule_arr['min:18','maxlength:10']
for (let i = 0; i < rule_arr.length; i++) {
const item_str = rule_arr[i];
const item_arr = item_str.split(':');
// item_arr['min','18']
rule[item_arr[0]] = JSON.parse(item_arr[1]); // 通过JSON.parse()来确定返回值的类型
// rule['min'] = '18'
// rule{min:18}
}
}
这样data-rule="min:18|maxlength:10"
就变成了一个rule{min:18,maxlength:10}
对象,可以在验证函数validator()中调用rule.xxx来验证是否符合要求了.