学习SMVlidator要从一个故事开始，很久很久以前，老板叫你校验一个表单，没填内容的时候提示一下，你就写了下面几行代码

<!--失去焦点时校验-->
<input data-rule="required" type="text">
<script>
    new SMValidator('form');
</script>
                

但是老板看不懂英文，你就改成这样

<input data-rule="required(请输入内容)" type="text">
                

老板要求只能输入字母

<input data-rule="/^[A-Z]*$/只能填写大写字母" type="text">
                

<!--还要不区分大小写-->
<input data-rule="/^[A-Z]*$/i/请输入字母" type="text">
                

完成后老板来检查，不填内容没提示了。于是你用"|"把两个规则合在了一起

<input data-rule="required(请输入内容)|/^[A-Z]*$/只能填写大写字母" type="text">
                

老板喜欢粉红色，他希望校验失败时input背景变成粉红色。你使用failCss来处理

<!--给input添加类名为error的样式-->
<input data-rule="required|failCss(error)" type="text">
                

<!--但是还不够，老板希望input的父容器都粉红色-->
<!--"+"可以把样式应用到input的父容器，还可以使用"++"影响父容器的父容器-->
<input data-rule="required|failCss(error,+error)" type="text">
                

第二天，老板心情改了，他不要红色背景，只需要input文字变成紫色。failStyle自定义内联样式

<!--failStyle只接受一个JSON格式(允许单引号)参数，但不能使用"+"来影响它的父容器-->
<input data-rule="/^[A-Z]*$/只能填写大写字母|failStyle({'color':'#c3f'})" type="text">
                

老板琢磨了一会儿，觉得校验成功后也要有样式。passCss/passStyle用于在校验成功时修改样式

<input data-rule="/^[A-Z]*$/只能填写大写字母|passCss(success)|passStyle({'color':'#090'})" type="text">
                

默认的失败消息会包含在一个color为#c00的span里。
但是老板不喜欢span，他要可以加粗文字的b，怎么办呢？于是你研究起failHtml

<!--把失败消息嵌到自定义样式的b中-->
<input data-rule="required|failHtml(<b style='color:#f00'></b>)" type="text">
                

<!--后面老板又说消息太啰嗦了，他只要一个×图标，然后你用"!"忽略消息文本-->
<input data-rule="required|failHtml(!<b style='color:#f00'>×</b>)" type="text">
                

<!--大道至简，你觉得这样完美了，但是这样老板就不知道他的输入出了什么问题，于是他要求在图标后面加回消息，纳尼？-->
<!--你用","把需求连在一起就解决了，so easy。但要注意的一点是书写顺序和显示顺序是相反的，2333-->
<input data-rule="required|failHtml(<b style='color:#f00'></b>,!<b style='color:#f00'>×</b>)" type="text">
                

<!--刚嘘一口气，老板的需求又来了，他要在input外面加一个虚线框，要你把消息放在框的外面-->
<!--是不是想蹦起来把老板砍了？先别急，记得failCss吗？我们可以用"+"影响到input的父容器-->
<input data-rule="required|failHtml(+<b style='color:#f00'></b>,!+<b style='color:#f00'>×</b>)" type="text">
                

<!--眼看就要下班了，你老板看你闲着，就突发灵感，他要求虚线框放到input的上面，消息放在框的里面-->
<!--机智的你通过css选择器得到这个框作为消息容器，为了防止消息容器消失你又在前面加了个"*"-->
<!--使用"*"可以在验证成功时不隐藏消息容器，当*!+同时出现时，必须按*!+++这个顺序-->
<input data-rule="required|failHtml(*.boss-ring)" type="text">
                

<!--下班后，当你得意洋洋地走出公司时，老板追着你喊：“×怎么不见了，文字也要红色啊。。。。。。”-->
                

第三天，虽然前一天的需求没完成，但是老板还是觉得你是个人才，于是既往不咎，新的需求开始。
他现在需要一个只能输入数字的表单，而且只能在失去焦点时校验

<!--你心里暗想，这还不简单，把input事件禁用就可以了-->
<!--number是内置规则，除此外还有email/range/length/equal-->
<!--disinput禁止oninput时校验-->
<input data-rule="number|disinput" type="text">
                

老板看了后不满意，他觉得在输入的时候要恢复原来的样式

<!--focus可以让在input获得焦点时恢复原来的样式-->
<input data-rule="number|disinput|focus" type="text">
                

老板满意地点点头，但他觉得最好是能够在失去焦点时也不要校验

<!--虽然你一脸懵逼，但还是照做了-->
<input data-rule="number|disinput|disblur" type="text">
                

这时老板发火了，说你忽悠他，说好的校验数字在哪里？你只好在input旁边做个按钮，点击时校验

<!--设置manul后为手动校验，相当于设置了disinput和disblur-->
<!--SMValidator.validate(inputs);使用js代码手动校验，inputs可以是css选择器，也可以是包含input对象的数组-->
<!--SMValidator.validate函数返回true/false表示检验成功/失败-->
<input id="manul" data-rule="number|manul" type="text">
<a href="javascript:SMValidator.validate('#manul');">校验是否为数字</a>
                

又快到下班时间，老板见你还是那么悠闲，于是又提了个需求

• 要求字段必填，且中文提示
• 只能输入字母，不区分大小写
• 校验失败时input文字为紫色，边框红色，背景色为粉红色
• 校验成功时input的文字和边框都为绿色
• 失败消息文字红色加粗
• 消息前面有一个×

<!--于是乎你就把之前的功能都串了起来-->
<input data-rule="required(请输入内容)|/^[A-Z]*$/i/请输入字母|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>)" type="text">
                

第四天，老板给你四个表单，一个校验数字，一个校验邮件，两个校验字母，要求用一样的样式。
你翻开昨天的代码，一看就傻了眼，这一大串html都是什么鬼，赶紧翻开 教程2 压压惊