所有东西都写在html里，无疑是自己给自己挖个深坑，不仅丑还难维护，所以你赶紧用js重写一遍

<!--fields里的属性对应input的name，如果你有多个input的name都是test1，那么他们共用这个校验规则-->
<!--rule可以是String、Array和Function-->
<!--rule为String时，只能填校验规则名，例如number/email，不能填required和failCss等，因为他们是特性，只能作为test1的属性-->
<!--rule为Array时，数组的第一项是正则表达式，第二项是失败消息-->
<!--rule为Function时，函数返回true或失败消息，function(val){return true || 'fail message'}-->
<!--failCss/failHtml接收多个参数时以数组的形式赋值，只接收一个参数时可以是字符串-->
<!--failStyle可以赋值Object字面量或者JSON格式的字符串-->
<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>
                

回到老板的需求上，四个表单一个校验数字，一个校验邮件，两个校验字母，用同样的样式，怎么复用代码才好呢？

<!--特性可以移到fields的同级，表示所有表单共用，这时test2只需要配置校验规则-->
<!--rules是自定义校验规则，可以是Array和Function-->
<!--rules为Array时与上面提到的rule一样-->
<!--rules为Function时可以带多个参数function(val, param1, ...){return true || 'fail message'}-->
<!--test2除了Object外还可以赋值String、Array、Function-->
<!--test2为String时可赋与html的data-rule一样值-->
<!--test2为Array/Function时与Object类型里的rule一致-->
<!--另外特性都可以赋值为false，例如，如果test2的值为Object，且Object的failCss属性为false，则test2在校验失败时也不使用失败样式-->
<!--特性还可以使用SMValidator.config({...});来设置，表示所有SMValidator实例都使用这些特性-->
<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