JS验证

其实写服务器和写客户端是一样的，除了技术的支持最重要的还是对业务流程的熟悉!当然在客户端更多的是对用户动作和事件的清晰，下面就是一个用户更新个人资料的简单验证.

<script language="javascript" type="text/javascript">
	hostURl ="<%=base%>";


//客户端检查基本的邮箱信息
function checkClientEmail(userEmail){
	var emailReg = new RegExp("^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$");
	if(userEmail.trim()==""){
		$("#emailTip").html("<font color='red'>請輸入郵箱</font>");
		$("#userEmail").focus();
		return false;
	}else{
		if(emailReg.test(userEmail)){
			$("#emailTip").html("");
			return true;
		}else{
			$("#emailTip").html("<font color='red'>請正确輸入郵箱</font>");
			$("#userEmail").focus();
			return false;
		}
	}
}

//服务器端检查该邮箱是否存在
function checkServerEmail(userEmail){
	var isServerExisted=true;
	$.ajax( {
		url : hostURl + '/user/checkEmail.action',
		type : "post",
		data : {
			email : userEmail
		},
		dataType : 'text',
		error : function() {
			$("#emailTip").html("<font color='red'>請求出錯，請稍後再試</font>");
			$("#userEmail").focus();
		},
		success : function(data) {
			var ret = eval("(" + data + ")");
			if (ret.msg == "success") {
				isServerExisted=false;
				$("#userEmail").attr("class","unchangeable").attr("readonly","readonly");
				$("#emailTip").html("<font color='green'>該郵箱可以使用</font>");
			}else {
				$("#emailTip").html("<font color='red'>該郵箱已經存在，請輸入其它郵箱</font>");
				$("#userEmail").focus();
			}
		}
	});
	return isServerExisted;
}

//当邮箱检查通过后检查其它字段信息
function submitUserInfoByCheck(){

	//普通字段
	var userId=$("#userId").val().trim();
	var userRealName=$("#userRealName").val().trim();
	var userGender=$("input[name='user.gender']:checked").val();
	var userInterest=$("#userInterest").val().trim();
	var userAddress=$("#userAddress").val().trim();
	var userEmail=$("#userEmail").val().trim();
	var userPhone=$("#userPhone").val().trim();

	//必须的字段
	var userPassword=$("#userPassword").val().trim();
	var userScreenName=$("#userScreenName").val().trim();

	//单独提取出来的日期类型的生日
	var userBirthday=$("#userBirthday").val().trim();
	
	if(userScreenName=="") {
		$("#screenNameTip").html("<font color='red'>請輸入昵稱后再提交</font>");
		$("#userScreenName").focus();
		return false;
	}
	if(userPassword==""){
		$("#userPasswordTip").html("<font color='red'>請輸入密碼后再提交</font>");
		$("#userPassword").focus();
		return false;
	}else if(userPassword.length <6) {
		$("#userPasswordTip").html("<font color='red'>輸入的密碼長度不能小於6位</font>");
		$("#userPassword").focus();
		return false;
	}

	//封装user对象属相让struts自动填充,让birthday单独处理
	var userAttrs="user.id="+userId+"&user.name="+userRealName+"&user.userName="+userScreenName+"&user.gender="
				+userGender+"&user.interest="+userInterest+"&user.address="+userAddress+"&user.email="+userEmail
				+"&user.phone="+userPhone+"&user.password="+userPassword;
	$.ajax( {
		url : hostURl + '/userCenter/updateUserselfModifyInfo!updateUserselfModifyInfo.action?'+userAttrs,
		type : "post",
		data : {
			userBirthday : userBirthday
		},
		dataType : 'json',
		error : function() {
			alert("抱歉，服務器忙，請您稍後再試!");
		},
		success : function(data) {
			if (data.status) {
				alert("修改信息成功");
				window.location.href = hostURl + "/userCenter/diplayUserInfo!getUserInfo.action";
			}else {
				alert("抱歉，服務器忙，請您稍後再試!");
			}
		}
	});

}

//基本信息验证结束后就提交
function updateUserInfo(){
	var isClientChecked;
	var isServerExisted;
	var emailType=$("#userEmail").attr("class");
	if(emailType=="changeable"){
		var userEmail=$("#userEmail").val().trim();
		isClientChecked=checkClientEmail(userEmail);
		if(isClientChecked){
			isServerExisted=checkServerEmail(userEmail);
			if(!isServerExisted){
				submitUserInfoByCheck();
			}
		}
	}else{
		submitUserInfoByCheck();
	}
}
</script>

<div>
<h2>基本資料</h2>
<input id="userId" type="hidden" name="user.id" value="${user.id}" />
<ul>

	<li>姓 名:<input id="userRealName" type="text" name="user.name" value="${user.name}" /></li>
	<li>昵 稱:<input id="userScreenName" type="text" name="user.userName" value="${user.userName}" />&nbsp;<font color="red">*</font></li>
	<li style="margin-left: 30px;" id="screenNameTip"></li>
	<li>密 碼:<input id="userPassword" type="password" name="user.password" value="${user.password}" />&nbsp;<font color="red">*</font></li>
	<li style="margin-left: 30px;" id="userPasswordTip"></li>
	<s:if test="user.gender==1">
		<li>性 别: <input type="radio" name="user.gender" value="1" checked="checked" />男 
					<input type="radio" name="user.gender" value="2" />女 
					<input type="radio" name="user.gender" value="0" />不公開
		</li>
	</s:if>
	<s:elseif test="user.gender==2">
		<li>性 别:<input type="radio" name="user.gender" value="1" />男 
				<input type="radio" name="user.gender" value="2" checked="checked" />女 
				<input type="radio" name="user.gender" value="0" />不公開
		</li>
	</s:elseif>
	<s:else>
		<li>性 别: <input type="radio" name="user.gender" value="1" />男
					 <input type="radio" name="user.gender" value="2" />女 
					 <input type="radio" name="user.gender" value="0" checked="checked" />不公開
		</li>
	</s:else>

	<li>生 日:<input id="userBirthday" type="text" name="user.birthday" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"
		value="<s:date name="user.birthday" format="yyyy-MM-dd" />" />
	</li>
	<li>興 趣:<input id="userInterest" type="text" name="user.interest" value="${user.interest}" /></li>
</ul>
</div>

服务器端的处理

	/**
	 * 将用户生日单独提取出来，<BR>
	 * 因为之前在本地使用struts自动封装没有问题，但是在远程服务器上总是报错<BR>
	 * 现在的做法就是让其它字段自动封装，而生日单独提取出来<BR>
	 * */
	public String updateUserselfModifyInfo() {

		JSONObject resJson = new JSONObject();

		String userBirthday = super.getRequest().getParameter("userBirthday");
		Date birthday = null;
		if (userBirthday != null && userBirthday.length() > 0)
			birthday = dateUtil.parseStringToDate(userBirthday, "yyyy-MM-dd");

		user.setBirthday(birthday);
		String updateStatus = userService.updateUserselfModifyInfo(user);
		if (updateStatus == null) {
			resJson.put("status", true);
			user = userService.getUserInfoById(user.getId());
			super.getRequest().getSession().setAttribute(
					CommonConstants.SESSION_USER, user);
		} else
			resJson.put("status", false);

		super.ajaxJson(resJson.toString());

		return null;
	}