这次老板觉得一下子校验所有的表单太吓人了，他希望可以一步一步引导用户去纠正错误的表单

//short表示表单短路校验，在遇到校验失败的表单时退出
//因为short控制的是整个form里所有input的检验行为，所以只能在config或SMValidator实例设置，data-rule设置无效
new SMValidator('form', {
    short: true
});
                

数字：

邮件：

提交表单

但对于单个input文本的校验，老板却不希望短路，他想要把所有校验失败的规则都显示出来

//使用"&"分割，可以校验input的所有规则
//返回的失败消息使用<br>分割，所以demo才设置failHtml为div来换行
//required属于特性，不与其他规则一起校验
//"&"与"|"不能混在一起使用
new SMValidator('form', {
    fields: {
        test6: {
            required: true,
            rule: 'number&length(2,)',
            failHtml: '<div style="color:#f00"></div>'
        }
    }
});
                

<!--使用html的形式则可以这样写-->
<input type="text" data-rule="required&number&length(2,)&failHtml(<div style='color:#f00'></div>)">
                

上面这些当然还不能满足老板的要求，他现在要求失败消息排在一行，用"；"分开且包在"【】"里

<input type="text" name="test7">
<span id="failMsg" style="color:#f00"></span>
<script>
    //fail是在校验失败时的回调函数，传回失败消息，使用"&"时传回的是数组，使用"|"时传回的是字符串
    //pass是在校验成功时的回调函数
    //fail和pass的调用对象是input，可以在回调函数中使用this指向input[name="test7"]
    new SMValidator('form', {
        fields: {
            test7: {
                required: true,
                failHtml: false, //禁用failHtml
                rule: 'number&length(2,)',
                fail: function(messages) {
                    document.getElementById('failMsg').innerText = '【' + messages.toString().replace(',', '；') + '】';
                },
                pass: function() {
                    document.getElementById('failMsg').innerText = '';
                }
            }
        }
    });
</script>
                

至此，老板已经疲于向你提需求了，他只想知道SMValidator到底还有什么功能。(＾－＾)V
本教程到此为止还没提到的功能有支持bootstrap和semantic皮肤，以及checkbox/radio/select和textarea的校验。
有兴趣的同学可以查看源码里的Demo，如果你不需要内置样式和规则，可以使用pure版本。
（完）