jquery validate使用
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 7 <script src="lib/jquery.validate.js" type="text/javascript"></script> 8 <style type="text/css"> 9 * { font-family: Verdana; font-size: 96%; } 10 label { width: 10em; float: left; } 11 label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 12 p { clear: both; } 13 .submit { margin-left: 12em; } 14 15 em { font-weight: bold; padding-right: 1em; vertical-align: top; } 16 em.error { 17 background:url("images/unchecked.gif") no-repeat 0px 0px; 18 padding-left: 16px; 19 } 20 em.success { 21 background:url("images/checked.gif") no-repeat 0px 0px; 22 padding-left: 16px; 23 } 24 25 </style> 26 <script type="text/javascript"> 27 $(document).ready(function(){ 28 29 $("#commentForm").validate({ 30 rules: { 31 username: { 32 required: true, 33 minlength: 2 34 }, 35 email: { 36 required: true, 37 email: true 38 }, 39 url:"url", 40 comment: "required" 41 }, 42 43 messages: { 44 username: { 45 required: '请输入姓名', 46 minlength: '请至少输入两个字符' 47 }, 48 email: { 49 required: '请输入电子邮件', 50 email: '请检查电子邮件的格式' 51 }, 52 url: '请检查网址的格式', 53 comment: '请输入您的评论' 54 }, 55 56 errorElement: "em", //可以用其他标签，记住把样式也对应修改 57 success: function(label) { 58 //label指向上面那个错误提示信息标签em 59 label.text(" ") //清空错误提示消息 60 .addClass("success"); //加上自定义的success类 61 } 62 63 }); 64 65 }); 66 </script> 67 68 </head> 69 <body> 70 71 72 <form class="cmxform" id="commentForm" method="get" action=""> 73 <fieldset> 74 <legend>一个简单的验证带验证提示的评论例子</legend> 75 <p> 76 <label for="cusername">姓名</label> 77 <em>*</em><input id="cusername" name="username" size="25" /> 78 </p> 79 <p> 80 <label for="cemail">电子邮件</label> 81 <em>*</em><input id="cemail" name="email" size="25" /> 82 </p> 83 <p> 84 <label for="curl">网址</label> 85 <em> </em><input id="curl" name="url" size="25" value="" /> 86 </p> 87 <p> 88 <label for="ccomment">你的评论</label> 89 <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea> 90 </p> 91 <p> 92 <input class="submit" type="submit" value="提交"/> 93 </p> 94 </fieldset> 95 </form> 96 </body> 97 </html>
效果图：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 7 <script src="lib/jquery.validate.js" type="text/javascript"></script> 8 <style type="text/css"> 9 * { font-family: Verdana; font-size: 96%; } 10 label { width: 10em; float: left; } 11 label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 12 p { clear: both; } 13 .submit { margin-left: 12em; } 14 15 em { font-weight: bold; padding-right: 1em; vertical-align: top; } 16 em.error { 17 background:url("images/unchecked.gif") no-repeat 0px 0px; 18 padding-left: 16px; 19 } 20 em.success { 21 background:url("images/checked.gif") no-repeat 0px 0px; 22 padding-left: 16px; 23 } 24 25 </style> 26 <script type="text/javascript"> 27 $(document).ready(function(){ 28 29 //自定义一个验证方法 30 $.validator.addMethod( 31 "formula", //验证方法名称 32 function(value, element, param) {//验证规则 33 return value == eval(param); 34 }, 35 '请正确输入数学公式计算后的结果'//验证提示信息 36 ); 37 38 $("#commentForm").validate({ 39 rules: { 40 username: { 41 required: true, 42 minlength: 2 43 }, 44 email: { 45 required: true, 46 email: true 47 }, 48 url:"url", 49 comment: "required", 50 valcode: { 51 formula: "7+9" 52 } 53 }, 54 55 messages: { 56 username: { 57 required: '请输入姓名', 58 minlength: '请至少输入两个字符' 59 }, 60 email: { 61 required: '请输入电子邮件', 62 email: '请检查电子邮件的格式' 63 }, 64 url: '请检查网址的格式', 65 comment: '请输入您的评论' 66 }, 67 68 errorElement: "em", //用来创建错误提示信息标签 69 success: function(label) { //验证成功后的执行的回调函数 70 //label指向上面那个错误提示信息标签em 71 label.text(" ") //清空错误提示消息 72 .addClass("success"); //加上自定义的success类 73 } 74 75 76 }); 77 78 }); 79 </script> 80 81 </head> 82 <body> 83 84 85 <form class="cmxform" id="commentForm" method="get" action=""> 86 <fieldset> 87 <legend>一个简单的验证带验证提示的评论例子</legend> 88 <p> 89 <label for="cusername">姓名</label> 90 <em>*</em><input id="cusername" name="username" size="25" /> 91 </p> 92 <p> 93 <label for="cemail">电子邮件</label> 94 <em>*</em><input id="cemail" name="email" size="25" /> 95 </p> 96 <p> 97 <label for="curl">网址</label> 98 <em> </em><input id="curl" name="url" size="25" value="" /> 99 </p> 100 <p> 101 <label for="ccomment">你的评论</label> 102 <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea> 103 </p> 104 <p> 105 <label for="cvalcode">验证码</label> 106 <input id="cvalcode" name="valcode" size="25" value="" />=7+9 107 </p> 108 <p> 109 <input class="submit" type="submit" value="提交"/> 110 </p> 111 </fieldset> 112 </form> 113 </body> 114 </html>
效果图：
