验证框架

源码地址：http://zhifeiji.aliapp.com/script/validate.js

 * 这个验证插件是这样的指定一个form表单
 * 里面只需要有如下的结构就可以了
 *
 * <input name="email" data-validate="vType=requried,when=blur,fail=email不正确,success=不错哦;vType=email,when=blur,fail=密码不能为空&setClass:fail，success=setClass:show;" />
 *
 * 设置说明：data-validate这个属性标明要验证的格式
 * 每个验证用分号隔开（注意英文的哦），vType表示要验证的类型，which表示那个元素触发（默认是自己）， when表示什么事件会触发这个判定，fail表示验证失败会出现什么提示这里&表示and，可以有多个操作，
 * setClass表示要设置的类用:分开后跟类名，removeClass表示移除类表示你要移除哪个类，这里可以添加html代码，但是不建议添加，这样会使你的html看起来非常混乱，基本上够了
 *
 * 说明:
 * 1 class类中不能使用-，可以使用下划线(_)
 * 2 验证的表单框，禁止使用onclick=functino这样绑定事件（!importent）
 * 3 addClass removeClass 里面的样式不要相同，否则后果自负
 * 4 这里只对submit做了处理，如果是ajax提交需要自己写了哦，这里提供ajax接口
 * 5 如果验证一组，则可以通过参数传入该组信息进行分析
 * 6 如果要在框的box要改变，那就传参数吧，然后修改方法
 * 7 支持多表单，支持多信息提示，比如验证密码的复杂度，每个复杂度定义一个方法，这样就行了，这样能满足大部分情况，支持ajax验证，ajax提交信息，都需要根据具体情况添加你自己的方法了
 * 8 validFun，是写验证方法的地方，会自动分配不同方法到不同元素的事件上
 *
 *
 * addForm参数是： {id:formid,which:"self",when:"click"}
 *
 * 生成后的结构是：{id:formid,ele:form,whichEle:"self",when:""}
 *
 * 生成事件队列是很有必要的，每个元素的每个事件要有一个验证队列以便于管理
 *
 * form 数据结构不合理存在问题，需要重新设计，因为如果一个验证失败了下面的验证还会继续，下面的验证结构会覆盖上面的验证结果，不合理
 *
 * 应改为队列，每个元素的每个验证事件都要有一个事件队列如果一个失败了，就取消后面要执行的验证同时记录每个失败的验证最后统一整理
 * which,相应的改为要验证哪个元素，而不是由哪个元素来验证，否则就杯具了config，是写配置信息的地方，正则表达式都在这里
 *
 *

使用实例，自己用，写一下笔记

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>居中</title>
        <style type="text/css">
            .succMail {
                border: green 1px solid;
            }
             
            .failMail {
                border: red 1px solid;
            }
             
            .succNum {
                border: green 1px solid;
                background: #cccccc;
            }
             
            .failNum {
                border: green 1px solid;
                background: #eeeeee;
            }
             
            .onSucc {
                border: 1px solid #a5c760;
                background: #f4ffd4;
            }
             
            .onFail {
                border: 1px solid red;
                background: #FFDBDB;
            }
        </style>
        <script type="text/javascript" src="validatePrject/validate.js">
        </script>
         
    </head>
    <body>
        <form id="form1">
            <p>
                6-8位数字：<input id="s1" name="number" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=不能为空哦！&addClass:onFail&removeClass:onSucc,success=你已经输入值了！&addClass:onFail&removeClass:onSucc;vType=number,when=blur, fail= <span>一定要输入数字哦！</span>&addClass:onFail&removeClass:onSucc,success  = 你输入的是正确的！&addClass:onSucc&removeClass:onFail ;vType=len(<8&>6),when=blur,fail=长度太长了哦！&addClass:onFail&removeClass:onSucc,success=长度很合适呵呵！&addClass:onSucc&removeClass:onFail ;" />
            </p>
            <p>
                email:<input id="s2" name="email" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=邮箱不能为空！,success=正确哦！;vType=email,when=blur, fail= <span>email不正确哦！</span>& addClass : failMail &  removeClass :  succMail,success  =email输入正确哦！&addClass:succMail&removeClass:failMail;" />
            </p>
            <p>
                <input id="s3" name="userName" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=username 错误& removeClass: right &addClass : worgnt,success=username正确;vType=email,when=blur, fail= <idv>密码不能为空</st>& addClass : rigte &  removeClass :  worgn &    addClass: soms,success  =duahobin&addClass:set;" />
            </p>
            <p>
                选择框：
                <select name="sx" data-validate="vType=required,when=change,fail=性别必须要选择& removeClass: right &addClass : worgnt,success=干的好！;">
                    <option></option>
                    <option value="m">男</option>
                    <option value="w">女</option>
                </select>
            </p>
            <p>
                多选：<input type="checkbox" /><span>读书</span>
                <input type="checkbox" /><span>看书</span>
                <!-- 如果是组的话就只能过滤了用参数传进来所有组成员 -->
            </p>
            <p>
                qq号:<input id="qq" name="qq" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=username 错误& removeClass: right &addClass : worgnt,success=username正确;vType=email,when=blur, fail= <idv>密码不能为空</st>& addClass : rigte &  removeClass :  worgn &    addClass: soms,success  =duahobin&addClass:set;" />
            </p><input type="submit" value="提交"/>
        </form><input id="testVd" type="button" name="vem" value="验证" />
        <form id="form2">
            <p>
                6-8位数字：<input id="s1" name="number" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=不能为空哦！&addClass:onFail&removeClass:onSucc,success=你已经输入值了！&addClass:onFail&removeClass:onSucc;vType=number,when=blur, fail= <span>一定要输入数字哦！</span>&addClass:onFail&removeClass:onSucc,success  = 你输入的是正确的！&addClass:onSucc&removeClass:onFail ;vType=len(<8&>6),when=blur,fail=长度太长了哦！&addClass:onFail&removeClass:onSucc,success=长度很合适呵呵！&addClass:onSucc&removeClass:onFail ;" />
            </p>
            <p>
                email:<input id="s2" name="email" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=邮箱不能为空！,success=正确哦！;vType=email,when=blur, fail= <span>email不正确哦！</span>& addClass : failMail &  removeClass :  succMail,success  =email输入正确哦！&addClass:succMail&removeClass:failMail;" />
            </p>
            <p>
                <input id="s3" name="userName" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=username 错误& removeClass: right &addClass : worgnt,success=username正确;vType=email,when=blur, fail= <idv>密码不能为空</st>& addClass : rigte &  removeClass :  worgn &    addClass: soms,success  =duahobin&addClass:set;" />
            </p>
            <p>
                选择框：
                <select name="sx" data-validate="vType=required,when=change,fail=性别必须要选择& removeClass: right &addClass : worgnt,success=干的好！;">
                    <option></option>
                    <option value="m">男</option>
                    <option value="w">女</option>
                </select>
            </p>
            <p>
                多选：<input type="checkbox" /><span>读书</span>
                <input type="checkbox" /><span>看书</span>
                <!-- 如果是组的话就只能过滤了用参数传进来所有组成员 -->
            </p>
            <p>
                qq号:<input id="qq" name="qq" style="displayasdf;" class="asdf" data-validate="vType=required,when=blur,fail=username 错误& removeClass: right &addClass : worgnt,success=username正确;vType=email,when=blur, fail= <idv>密码不能为空</st>& addClass : rigte &  removeClass :  worgn &    addClass: soms,success  =duahobin&addClass:set;" />
            </p><input type="submit" value="提交"/>
        </form>
        <script type="text/javascript">
             
            validator.addForm({
                id: "form1",
                which: "form1",
                when: "submit"
            });
               
            validator.addForm({
                id: "form2",
                which: "form2",
                when: "submit"
            });
             
             
        </script>
    </body>
</html>