validate验证
2015-11-24
19:38:28
需要juqery jar包和validate jar包
validate中的方法：
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least{0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )
1 <%@page contentType="text/html;charset=utf-8"%> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>用户注册 - 当当网</title> 7 <link href="../css/login.css" rel="stylesheet" type="text/css" /> 8 <link href="../css/page_bottom.css" rel="stylesheet" type="text/css" /> 9 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script> 10 <script type="text/javascript" src="../js/jquery.validate.js"></script> 11 <script type="text/javascript"> 12 $(function() { 13 //自定义validate 14 $.validator.addMethod("namejuadge",function(value,element,param){ 15 return /^[0-9a-z]*|[\u4e00-\u9fa5]*$/.test(value); 16 17 }); 18 $.validator.addMethod("passwordjuadge",function(value,element,param){ 19 return /^[0-9a-zA-Z]*$/.test(value); 20 21 }); 22 $("#f").validate({ 23 rules:{ 24 useremail:{ 25 required:true, 26 minlength:4, 27 maxlength:20, 28 email:true, 29 30 }, 31 usernickname:{ 32 required:true, 33 minlength:4, 34 maxlength:20, 35 namejuadge:true 36 }, 37 userpassword:{ 38 required:true, 39 rangelength:[6,20], 40 passwordjuadge:true 41 42 }, 43 password1:{ 44 equalTo:"#txtPassword" 45 } 46 47 }, 48 messages:{ 49 useremail:{ 50 required:"不能为空", 51 minlength:"最少需要{0}位", 52 maxlength:"最大不能超过{0}位", 53 emial:"填写正确的邮箱格式" 54 }, 55 usernickname:{ 56 required:"不能为空", 57 minlength:"最少需要{0}位", 58 maxlength:"最大不能超过{0}位", 59 namejuadge:"昵称可以由小写英文字母、中文、数字组成" 60 }, 61 userpassword:{ 62 required:"不能为空", 63 rangelength:"密码长度为{0}到{1}", 64 passwordjuadge:"密码可以由大小写英文字母、数字组成" 65 }, 66 password1:{ 67 equalTo:"两次密码不一致" 68 } 69 70 } 71 72 }); 73 alert("${drawcode}"); 74 $("#imgVcode").text("${drawcode}"); 75 }); 76 </script> 77 78 </head> 79 <body> 80 <%@include file="../common/head1.jsp"%> 81 <div class="login_step"> 82 注册步骤: <span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功 83 </div> 84 <div class="fill_message"> 85 <form name="ctl00" method="post" id="f" action="../UserServlet" 86 > 87 <h2>以下均为必填项</h2> 88 <table class="tab_login"> 89 <tr> 90 <td valign="top" class="w1">请填写您的Email地址：</td> 91 <td><input name="useremail" type="text" id="txtEmail" 92 class="text_input" /> 93 <div class="text_left" id="emailValidMsg"> 94 <p>请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。</p> 95 <span id="email.info" style="color:red"></span> 96 </div> 97 </td> 98 </tr> 99 <tr> 100 <td valign="top" class="w1">设置您在当当网的昵称：</td> 101 <td><input name="usernickname" type="text" id="txtNickName" 102 class="text_input" /> 103 <div class="text_left" id="nickNameValidMsg"> 104 <p>您的昵称可以由小写英文字母、中文、数字组成，</p> 105 <p>长度4－20个字符，一个汉字为两个字符。</p> 106 <span id="name.info" style="color:red"></span> 107 </div> 108 </td> 109 </tr> 110 <tr> 111 <td valign="top" class="w1">设置密码：</td> 112 <td><input name="userpassword" type="password" 113 id="txtPassword" class="text_input" /> 114 <div class="text_left" id="passwordValidMsg"> 115 <p>您的密码可以由大小写英文字母、数字组成，长度6－20位。</p> 116 <span id="password.info" style="color:red"></span> 117 </div> 118 </td> 119 </tr> 120 <tr> 121 <td valign="top" class="w1">再次输入您设置的密码：</td> 122 <td><input name="password1" type="password" id="txtRepeatPass" 123 class="text_input" /> 124 <div class="text_left" id="repeatPassValidMsg"> 125 <span id="password1.info" style="color:red"></span> 126 </div> 127 </td> 128 </tr> 129 <tr> 130 <td valign="top" class="w1">验证码：</td> 131 <td><img class="yzm_img" id='imgVcode' 132 src="/dang/user/image.action" /> <input name="number" type="text" 133 id="txtCode" class="yzm_input" /> 134 <div class="text_left t1"> 135 <p class="t1"> 136 <span id="vcodeValidMsg">请输入图片中的四个字母。</span> <a 137 href="../GetVCodeGenerator">看不清楚？换个图片</a> 138 </p> 139 <span id="number.info" style="color:red"></span> 140 </div> 141 </td> 142 </tr> 143 </table> 144 145 <div class="login_in"> 146 147 <input id="btnClientRegister" class="button_1" name="submit" 148 type="submit" value="注 册" /> 149 </div> 150 </form> 151 </div> 152 <%@include file="../common/foot1.jsp"%> 153 </body> 154 </html>
