自定义表单验证框架
自定义表单验证框架
/*** */var Tool = {};Tool.onReady=function(handler){window.onload=handler;}Tool.createSpan=function(style,msg){return "<span name="code"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--<link rel="stylesheet" type="text/css" href="styles.css">--> <link rel="stylesheet" href="css/validator.css" type="text/css"></link> <link rel="stylesheet" href="css/style.css" type="text/css"></link> <script type="text/javascript" src="Fv.js"></script></head> <script type="text/javascript"> //var config=[{id:'username',isnull:true}]; function handler(){ alert("调用了自己的提交"); alert("就算验证通过我也不让表单提交，我返回一个false"); return false; } var config={form:"myform",submit:handler, fields:[{name:'username',allownull:false,regExp:'user',defaultMsg:'用户名不能为空,6-12位,如:zhangsan',focusMsg:'请输入你的用户名',errorMsg:'用户名不能为空,且不能有非法字符',rightMsg:'用户名输入合法',msgTip:'usertip'}, {name:'pwd',allownull:false ,regExp:'user',defaultMsg:'密码不能为空,6-12位,如:******',focusMsg:'请输入你的密码',errorMsg:'密码不能为空,且不能有非法字符',rightMsg:'用户密码输入合法',msgTip:'pwdtip'}, {name:'email',allownull:true,regExp:/^\w{3,12}@\w{1,10}.\w{2,10}$/,defaultMsg:'电子邮箱如:kefu@sina.com',focusMsg:'请输入你的电子邮箱',errorMsg:'非法的电子邮箱帐号',rightMsg:'电子邮箱输入正确',msgTip:'emailtip'}, {name:'sex',allownull:false,defaultMsg:'请选择用户性别',focusMsg:'没有第三种性别可选了',errorMsg:'用户性别必须选择',rightMsg:'你确认这个性别的吗？',msgTip:'sextip'}, {name:'likes',allownull:false,number:2,defaultMsg:'请选择用户爱好',focusMsg:'认真选择你的爱好吧',errorMsg:'用户爱好必须选择两项',rightMsg:'这些都是不错的爱好!',msgTip:'likestip'}, {name:'age',allownull:false,defaultMsg:'请选择您的年龄',focusMsg:'年龄必须要选择',errorMsg:'你还没有选择你的年龄!',rightMsg:'年龄选择正确!',msgTip:'agetip'} ]} Tool.onReady(function(){ var f = new Fv(config); f.register(); }); </script> <body> <form action="" id="myform" id="myform" method="POST"> <center> <table> <tr><td>用 户 名:</td><td><input type="text" name="username" width=80/></td><td><span id="usertip"></span></td></tr> <tr><td>密 码:</td><td><input type="text" name="pwd" width=80/></td><td><span id="pwdtip"></span></td></tr> <tr><td>电子邮箱:</td><td><input type="text" name="email" width=80/></td><td><span id="emailtip"></span></td></tr> <tr><td>性 别:</td><td><input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女</td><td><span id="sextip"></span></td></tr> <tr><td>爱 好:</td><td><input type="checkbox" name="likes" value="体育" >体育 <input type="checkbox" name="likes" value="蓝球" >蓝球</td><td><span id="likestip"></span></td></tr> <tr><td>年 龄:</td><td><select name="age"><option>请选择</option><option>18</option><option>20</option><option>19</option></select></td><td><span id="agetip"></span></td></tr> <tr><td colspan=3 align="center"><input type="submit" value="提交表单"></td></tr> </table> </center> </form> </body></html>?