用JQuery.validate包来进行验证

最新推荐文章于 2022-12-10 19:48:14 发布

zhaoyu228

最新推荐文章于 2022-12-10 19:48:14 发布

阅读量240

点赞数

分类专栏： JavaScript 文章标签： jQuery HTML ViewUI

本文链接：https://blog.csdn.net/zhaoyu228/article/details/83737190

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<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> </td>
     				<td>
     					<input type="submit" value="注册">　
     					<input type="button" value="返回" onclick="window.location.href='ZX10001_login.jsp'">
     				</td>
     			</tr>
     		</table>
     	</form>
     </div>
  </body>