-
所有东西都写在html里,无疑是自己给自己挖个深坑,不仅丑还难维护,所以你赶紧用js重写一遍
<input type="text" name="test1">
<script>
new SMValidator('form', {
fields: {
test1: {
rule: [/^[A-Z]*$/i, '请输入字母'],
required: '请输入内容',
failCss: 'error',
failStyle: {color:'#c3f', border:'1px solid #f00'},
passCss: 'success',
passStyle: {color: '#090'},
failHtml: ["<b style='color:#f00'></b>", "!<b style='color:#f00'>×</b>"],
}
}
});
</script>
×
-
回到老板的需求上,四个表单一个校验数字,一个校验邮件,两个校验字母,用同样的样式,怎么复用代码才好呢?
<input type="text" name="test2">
<input type="text" name="test3">
<input type="text" name="test4">
<input type="text" name="test4">
<script>
new SMValidator('form', {
required: '请输入内容',
failCss: 'error',
failStyle: {color:'#c3f', border:'1px solid #f00'},
passCss: 'success',
passStyle: {color: '#090'},
failHtml: ["<b style='color:#f00'></b>", "!<b style='color:#f00'>×</b>"],
rules: {
onlyLetter: [/^[A-Z]*$/i, '请输入字母']
},
fields: {
test2: 'required|number',
test3: 'required|email',
test4: 'required|onlyLetter'
}
});
</script>
数字:×
邮件:×
字母:×
字母:×
-
SMValidator目前全部特性有以下这些:
required,disinput,disblur,focus,manul,failHtml,passHtml,failStyle,failCss,passStyle,passCss,async,short
除了async和short,其他特性在教程1都介绍过。要注意的是required和async比较特别,他们是特性和规则的合体
完成这些需求后,你想起老板不懂英文,但是内置规则的提示都是英文,怎么办好呢?老板已经往这边走了过来 教程3