验证框架
源码地址：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>
浙公网安备 33010602011771号