用JQuery.validate包来进行验证

zhaoyu2288

浏览: 39439 次
性别:
来自: 上海

最近访客更多访客>>

kingtsing

dhf481229

轩轩5V24

only1986

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery HTML

<script type="text/javascript">
		$(function(){
			validate();
		});
		function doregister(){ 
			var password = sTrim($("input[type=password][name=pwd]").val(),true);
			$("input[type=hidden][name=password]").val(hex_md5(password));
		}
		//验证
		function validate(){
			$("#loginForm").validate({
				submitHandler:function(form){
            		doregister();  
            		form.submit();
       			 }, 
				rules:{
					username:{
						required:true,
						minlength:6
					},
					pwd:{
						required:true,
						minlength:6
					},
					confirm_password: {
						required: true,
						minlength:6,
						equalTo: "#pwd"
					},
					email: {
    					required: true,
    					email: true
   					},
					randImage:{
						required: true,
						maxlength:4,
						minlength:4
					},
					name:"required"
				},
				messages:{
					username:{
						required:"<span style='color:red'>请输入用户名</span>",
						minlength: jQuery.format("<span style='color:red'>用户名不能小于{0}个字符</span>")
					},
					pwd: {
					    required: "<span style='color:red'>请输入密码</span>",
					    minlength: jQuery.format("<span style='color:red'>密码不能小于{0}个字符</span>")
					},
					confirm_password: {
						required: "<span style='color:red'>请输入确认密码</span>",
					 	minlength: "<span style='color:red'>确认密码不能小于6个字符</span>",
						equalTo: "<span style='color:red'>两次输入密码不一致</span>"
					},
					email:{
						required: "<span style='color:red'>请输入邮箱</span>",
    					email: "<span style='color:red'>邮箱格式不正确</span>"
					},
					randImage:{
						required: "<span style='color:red'>验证码不能为空</span>",
						maxlength:"<span style='color:red'>验证码为4位长度</span>",
						minlength:"<span style='color:red'>验证码为4位长度</span>"
					},
					name:"<span style='color:red'>请输入姓名</span>"
				}		
			});
		}
	</script>
  </head>
  
  <body>
     <div>
     	<BR><BR>
     	<div style="color:red">${result.msg }</div>
     	<form action="ZX10001_Register.do" method="post" id="loginForm">
     		<input type="hidden" name="password">
     		<table border="1">
     			<tr>
     				<td colspan="2"><center>用户登录</center></td>
     			</tr>
     			<tr>
     				<td>用户名：</td>
     				<td>
     					<input type="text" style="width:150px;" name="username" value="${result.username }">
     				</td>
     			</tr>
     			<tr>
     				<td>密码：</td>
     				<td>
     					<input type="password" style="width:150px;" name="pwd" id="pwd">
     				</td>
     			</tr>
     			<tr>
     				<td>确认密码：</td>
     				<td>
     					<input type="password" style="width:150px;" name="confirm_password">
     				</td>
     			</tr>
     			<tr>
     				<td>姓名：</td>
     				<td>
     					<input type="text" style="width:150px;" name="name" value="${result.name }">
     				</td>
     			</tr>
     			<tr>
     				<td>电子邮箱：</td>
     				<td>
     					<input type="text" style="width:150px;" name="email" value="${result.email }">
     				</td>
     			</tr>
     			<tr>
     				<td>验证码：</td>
     				<td>
     					<img border="0" src="image.jsp" width="38" height="20"/> 
     					<input type="text" style="width:50px;" name="randImage">
     				</td>
     			</tr>
     			<tr>
     				<td>&nbsp;</td>
     				<td>
     					<input type="submit" value="注册">　
     					<input type="button" value="返回" onclick="window.location.href='ZX10001_login.jsp'">
     				</td>
     			</tr>
     		</table>
     	</form>
     </div>
  </body>

附一教程地址：http://www.cnblogs.com/guide/archive/2010/04/07/1706028.html