JS验证
其实写服务器和写客户端是一样的，除了技术的支持最重要的还是对业务流程的熟悉!当然在客户端更多的是对用户动作和事件的清晰，下面就是一个用户更新个人资料的简单验证.<script language="javascript" type="text/javascript">hostURl ="<%=base%>";//客户端检查基本的邮箱信息function checkClientEmail(userEmail){var emailReg = new RegExp("^[-_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: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"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);} elseresJson.put("status", false);super.ajaxJson(resJson.toString());return null;}
页:
[1]