Ajax注册校验

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/layout_2col_advanced.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="js/jquery.js"></script>
<script>
	var emailHasRegist = false;
	var nameChucuo = false;
	var passwordChucuo = false;
	$(function() {
		$('#email').blur(function() {
			var email = $.trim($(this).val());
			if (email == "") {
				emailHasRegist = true;
				$('#checkInfo').text("Email不能为空");
			} else {
				var reg = /^\w(\w+\.?\-?)*(\w)@(\w+\.?)*\w$/;
				if(reg.test(email)) {
					emailHasRegist = false;
					$.ajax({
						url : "ajaxCheckEmail",
						data : {
							"user.email" : $("#email").val()
						},
						dataType : "json",
						cache : false ,
						type : "POST",
						success : function(data) {
							emailHasRegist = data.validate;
							$('#checkInfo').html(data.tip);
							}
						});					
				}else {
					emailHasRegist = true;
					$('#checkInfo').text("Email格式不正确");
				}
			}
		});
		
		$("input[name='user.name']").blur(function() {
			var name = $.trim($(this).val());
			if (name == "") {
				nameChucuo = true;
				$(this).parent().find("p").text("昵称不能为空");
			} else {
				if(name.length >20 || name.length < 4) {
					nameChucuo = true;
					$(this).parent().find("p").text("昵称只能在4-16之间");
				}else {
					nameChucuo = false;
					$(this).parent().find("p").text("");
				}
			}
		});
		
		$("input[name='user.password']").blur(function() {
			var password = $.trim($(this).val());
			if (password == "") {
				passwordChucuo = true;
				$('#passwordChucuo').text("密码不能为空");
			} else {
				if (password.length < 6 || password.length > 16) {
					passwordChucuo = true;
					$('#passwordChucuo').text("您的密码长度只能在6-16之间");
				} else {
					passwordChucuo = false;
					$('#passwordChucuo').text("");
				}
			}
		});
		
		$("form").submit(function() {
			if(emailHasRegist || nameChucuo || passwordChucuo) {
				return false;
			}else {
				return true;
			}
		});
	});
</script>

</head>

<body>
<div class="page_margins">
  <div class="page">
  <div id="header" style="padding-top:0px">
 	  
      <div id="top_nav_bar_quick">
        <img src="img/logo.jpg" style="float:left"/>
      	<ul>
			<li><a href="#"><span>登录</span></a></li>
			<li><a href="#"><span>注册</span></a></li>
			<li><a href="#"><span>设置首页</span></a></li>
			<li><a href="#"><span>收藏</span></a></li>
			<li><a href="#"><span>帮助</span></a></li>
		</ul>
      </div>
     </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="main">
      <!-- begin: #col1 - first float column -->
      <div id="col1">
        <div id="col1_content" class="clearfix" style="background-color:#F0F5F8;border:1px solid #B8D4E8;">
          <h2>注册会员</h2>
          <div class="subcolumns">
          	<s:fielderror/>
             <s:form action="regist.action" namespace="/" theme="simple">
				<dl>
					<dt>email(email账号用于登陆)</dt>
					<dd><s:textfield name="user.email" id="email" theme="simple"/><p id="checkInfo" style="color: red"></p></dd>
					
					<dt>昵称(中英文均可4到16个字符以内)</dt>
					<dd><s:textfield name="user.name" theme="simple"/><p style="color: red"></p></dd>
					
					<dt>密码(密码由6-20个英文字母或数字组成)</dt>
					<dd><s:password name="user.password" theme="simple"/><p style="color: red" id="passwordChucuo"></p></dd>
					
					<dt>密码确认</dt>
					<dd><s:password name="password" theme="simple"/></dd>
					
					
					<s:submit value="注册"></s:submit>
				</dl>
			</s:form>
          </div>
        </div>
      </div>
      <div id="col3">
        <div style="margin:10px 0 0 30px;background-image: url('img/icon/regist.png'); width:128px; height:128px"></div>
        <div id="ie_clearing">&nbsp;</div>
      </div> 
    </div>
  <s:include value="../footer.jsp"/>
  </div>
</div>
</body>
</html>

你可能感兴趣的:(html,Ajax,json,XHTML,struts)