练习-基于jquery的表单验证控件资源-CSDN文库

共5个文件

js：3个

html：1个

json：1个

jquery

validate

表单验证

5星 · 超过95%的资源需积分: 9 184 浏览量 2014-08-25 17:10:59 上传评论 1 收藏 40KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

-lpy-表单验证.zip （5个子文件）

表单验证

jquery-validate-src.js 12KB

validate.html 4KB

jquery-datePicker-src.js 2KB

jquery-1.8.3.min.js 91KB

remote-true.json 5B

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery-validate-src.js"></script> <script type="text/javascript" src="jquery-datePicker-src.js"></script> <script type="text/javascript"> $(function(){ //日期控制,未完 jquery-datePicker-src.js $("#from").datePicker(); $("#submi").click(function(e){ // 被动验证表单 $("#form").validForm(); }); $("#reset").click(function(){ // 关闭所有的提示块 $("#form").tootipFadeOut(); }); $("#form").validate({ // 有input后面添加,暂时意思不大 // after:"<div class=\"warnValidate\">22222222222222222</div>", // 自定义 message // message : {required: "必选字段22{0}22"}, //提示块的偏移量 offsetX : 85, offsetY : -15 // 未通过验证后执行的方法,,如果使用将替换默认的显示提示块 /* falseFun:function(input){ alert("cccc sss "+e); }, */ // 通过验证后执行的方法,如果使用将替换默认的隐藏提示块 /* trueFun:function(input){ } */ }); }) </script> <style> /* 验证的CSS */ .warnValidate { position: absolute; border:3px solid red; border-radius:5px; margin :3px; padding : 1px; background-color: #FF9D00; display:none; } /* 日期控件CSS*/ .day{ text-align: center; } .shangYue{ color: #CCCCCC; } .xiaYue{ color: #CCCCCC; } </style> </head> <body> value: <input id="content" type="text" size="50"/> 失去焦点Input的value <br/> validate: <input id="rule" type="text" size="50" /> 失去焦点Input的validate属性 <form id="form">  <table style="padding: 30px 0px 0px 150px;"> <tr> <td style="height:35px;"> <label>1</label> </td> <td style="height:35px;"> <input id="1" type="text" value="该表单没有validate属性,所以不验证" size="40" /> </td> </tr> <tr> <td style="height:35px;"> <label>2minlength</label> </td> <td style="height:35px;"> <input id="2" type="text" validate="{required:true,minlength:2,date:true}" value="2014-08-18" size="40" /> </td> </tr> <tr> <td style="height:35px;"> <label>3maxlength能</label> </td> <td style="height:35px;"> <input id="3" type="text" validate="{required:true,maxlength:5,max:10}" size="40" /> </td> </tr> <tr> <td style="height:35px;"> <label>4</label> </td> <td style="height:35px;"> <input id="4" type="text" validate="{required:true,rangelength:[2,5]}" value="4" size="40" /> </td> </tr> <tr> <td style="height:35px;"> <label>required</label> </td> <td style="height:35px;"> <textarea id="5_required" validate="{required:true}"></textarea> </td> </tr> <tr> <td style="height:35px;"> <label>6_remote</label> </td> <td style="height:35px;"> <textarea id="6_remote" name="6_remote" validate="{required:true,remote:'remote-true.json'}"></textarea>远程数据是假的,存在remote-true.json文件 </td> </tr> <tr> <td style="height:35px;"> <label>7_equalTo</label> </td> <td style="height:35px;"> <textarea id="7_equalTo" name="7_equalTo" validate="{equalTo:'#6_remote'}"></textarea> </td> </tr> </table> <label>another</label><input id="5" type="text" validate="{required:true,email:true}" value="abc123@qq.com"/><br/> <input type="submit" value="提交"/> <b> type="submit" 显示验证未通的消息块</b> <br/><input id="reset" type="reset" value="重置"> <b> type="reset" 重置并隐藏验证未通的消息块</b> </form> <a id="submi" href="#" onclick="return false;">A标签提交</a> <b> A标签的单击事件触发</b> <hr/> <div id="ddddd"></div> </body> </html>

评论收藏

内容反馈