- 论坛徽章:
- 0
|
JS验证
其实写服务器和写客户端是一样的,除了技术的支持最重要的还是对业务流程的熟悉!当然在客户端更多的是对用户动作和事件的清晰,下面就是一个用户更新个人资料的简单验证.
Js代码- 1.<script language="javascript" type="text/javascript">
- 2. hostURl ="<%=base%>";
- 3.
- 4.
- 5.//客户端检查基本的邮箱信息
- 6.function checkClientEmail(userEmail){
- 7. var emailReg = new RegExp("^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$");
- 8. if(userEmail.trim()==""){
- 9. $("#emailTip").html("<font color='red'>請輸入郵箱</font>");
- 10. $("#userEmail").focus();
- 11. return false;
- 12. }else{
- 13. if(emailReg.test(userEmail)){
- 14. $("#emailTip").html("");
- 15. return true;
- 16. }else{
- 17. $("#emailTip").html("<font color='red'>請正确輸入郵箱</font>");
- 18. $("#userEmail").focus();
- 19. return false;
- 20. }
- 21. }
- 22.}
- 23.
- 24.//服务器端检查该邮箱是否存在
- 25.function checkServerEmail(userEmail){
- 26. var isServerExisted=true;
- 27. $.ajax( {
- 28. url : hostURl + '/user/checkEmail.action',
- 29. type : "post",
- 30. data : {
- 31. email : userEmail
- 32. },
- 33. dataType : 'text',
- 34. error : function() {
- 35. $("#emailTip").html("<font color='red'>請求出錯,請稍後再試</font>");
- 36. $("#userEmail").focus();
- 37. },
- 38. success : function(data) {
- 39. var ret = eval("(" + data + ")");
- 40. if (ret.msg == "success") {
- 41. isServerExisted=false;
- 42. $("#userEmail").attr("class","unchangeable").attr("readonly","readonly");
- 43. $("#emailTip").html("<font color='green'>該郵箱可以使用</font>");
- 44. }else {
- 45. $("#emailTip").html("<font color='red'>該郵箱已經存在,請輸入其它郵箱</font>");
- 46. $("#userEmail").focus();
- 47. }
- 48. }
- 49. });
- 50. return isServerExisted;
- 51.}
- 52.
- 53.//当邮箱检查通过后检查其它字段信息
- 54.function submitUserInfoByCheck(){
- 55.
- 56. //普通字段
- 57. var userId=$("#userId").val().trim();
- 58. var userRealName=$("#userRealName").val().trim();
- 59. var userGender=$("input[name='user.gender']:checked").val();
- 60. var userInterest=$("#userInterest").val().trim();
- 61. var userAddress=$("#userAddress").val().trim();
- 62. var userEmail=$("#userEmail").val().trim();
- 63. var userPhone=$("#userPhone").val().trim();
- 64.
- 65. //必须的字段
- 66. var userPassword=$("#userPassword").val().trim();
- 67. var userScreenName=$("#userScreenName").val().trim();
- 68.
- 69. //单独提取出来的日期类型的生日
- 70. var userBirthday=$("#userBirthday").val().trim();
- 71.
- 72. if(userScreenName=="") {
- 73. $("#screenNameTip").html("<font color='red'>請輸入昵稱后再提交</font>");
- 74. $("#userScreenName").focus();
- 75. return false;
- 76. }
- 77. if(userPassword==""){
- 78. $("#userPasswordTip").html("<font color='red'>請輸入密碼后再提交</font>");
- 79. $("#userPassword").focus();
- 80. return false;
- 81. }else if(userPassword.length <6) {
- 82. $("#userPasswordTip").html("<font color='red'>輸入的密碼長度不能小於6位</font>");
- 83. $("#userPassword").focus();
- 84. return false;
- 85. }
- 86.
- 87. //封装user对象属相让struts自动填充,让birthday单独处理
- 88. var userAttrs="user.id="+userId+"&user.name="+userRealName+"&user.userName="+userScreenName+"&user.gender="
- 89. +userGender+"&user.interest="+userInterest+"&user.address="+userAddress+"&user.email="+userEmail
- 90. +"&user.phone="+userPhone+"&user.password="+userPassword;
- 91. $.ajax( {
- 92. url : hostURl + '/userCenter/updateUserselfModifyInfo!updateUserselfModifyInfo.action?'+userAttrs,
- 93. type : "post",
- 94. data : {
- 95. userBirthday : userBirthday
- 96. },
- 97. dataType : 'json',
- 98. error : function() {
- 99. alert("抱歉,服務器忙,請您稍後再試!");
- 100. },
- 101. success : function(data) {
- 102. if (data.status) {
- 103. alert("修改信息成功");
- 104. window.location.href = hostURl + "/userCenter/diplayUserInfo!getUserInfo.action";
- 105. }else {
- 106. alert("抱歉,服務器忙,請您稍後再試!");
- 107. }
- 108. }
- 109. });
- 110.
- 111.}
- 112.
- 113.//基本信息验证结束后就提交
- 114.function updateUserInfo(){
- 115. var isClientChecked;
- 116. var isServerExisted;
- 117. var emailType=$("#userEmail").attr("class");
- 118. if(emailType=="changeable"){
- 119. var userEmail=$("#userEmail").val().trim();
- 120. isClientChecked=checkClientEmail(userEmail);
- 121. if(isClientChecked){
- 122. isServerExisted=checkServerEmail(userEmail);
- 123. if(!isServerExisted){
- 124. submitUserInfoByCheck();
- 125. }
- 126. }
- 127. }else{
- 128. submitUserInfoByCheck();
- 129. }
- 130.}
- 131.</script>
-
复制代码 Html代码- 1.<div>
- 2.<h2>基本資料</h2>
- 3.<input id="userId" type="hidden" name="user.id" value="${user.id}" />
- 4.<ul>
- 5.
- 6. <li>姓 名:<input id="userRealName" type="text" name="user.name" value="${user.name}" /></li>
- 7. <li>昵 稱:<input id="userScreenName" type="text" name="user.userName" value="${user.userName}" /> <font color="red">*</font></li>
- 8. <li style="margin-left: 30px;" id="screenNameTip"></li>
- 9. <li>密 碼:<input id="userPassword" type="password" name="user.password" value="${user.password}" /> <font color="red">*</font></li>
- 10. <li style="margin-left: 30px;" id="userPasswordTip"></li>
- 11. <s:if test="user.gender==1">
- 12. <li>性 别: <input type="radio" name="user.gender" value="1" checked="checked" />男
- 13. <input type="radio" name="user.gender" value="2" />女
- 14. <input type="radio" name="user.gender" value="0" />不公開
- 15. </li>
- 16. </s:if>
- 17. <s:elseif test="user.gender==2">
- 18. <li>性 别:<input type="radio" name="user.gender" value="1" />男
- 19. <input type="radio" name="user.gender" value="2" checked="checked" />女
- 20. <input type="radio" name="user.gender" value="0" />不公開
- 21. </li>
- 22. </s:elseif>
- 23. <s:else>
- 24. <li>性 别: <input type="radio" name="user.gender" value="1" />男
- 25. <input type="radio" name="user.gender" value="2" />女
- 26. <input type="radio" name="user.gender" value="0" checked="checked" />不公開
- 27. </li>
- 28. </s:else>
- 29.
- 30. <li>生 日:<input id="userBirthday" type="text" name="user.birthday" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"
- 31. value="<s:date name="user.birthday" format="yyyy-MM-dd" />" />
- 32. </li>
- 33. <li>興 趣:<input id="userInterest" type="text" name="user.interest" value="${user.interest}" /></li>
- 34.</ul>
- 35.</div>
复制代码 服务器端的处理
Java代码- 1./**
- 2. * 将用户生日单独提取出来,<BR>
- 3. * 因为之前在本地使用struts自动封装没有问题,但是在远程服务器上总是报错<BR>
- 4. * 现在的做法就是让其它字段自动封装,而生日单独提取出来<BR>
- 5. * */
- 6.public String updateUserselfModifyInfo() {
- 7.
- 8. JSONObject resJson = new JSONObject();
- 9.
- 10. String userBirthday = super.getRequest().getParameter("userBirthday");
- 11. Date birthday = null;
- 12. if (userBirthday != null && userBirthday.length() > 0)
- 13. birthday = dateUtil.parseStringToDate(userBirthday, "yyyy-MM-dd");
- 14.
- 15. user.setBirthday(birthday);
- 16. String updateStatus = userService.updateUserselfModifyInfo(user);
- 17. if (updateStatus == null) {
- 18. resJson.put("status", true);
- 19. user = userService.getUserInfoById(user.getId());
- 20. super.getRequest().getSession().setAttribute(
- 21. CommonConstants.SESSION_USER, user);
- 22. } else
- 23. resJson.put("status", false);
- 24.
- 25. super.ajaxJson(resJson.toString());
- 26.
- 27. return null;
- 28.}
复制代码 |
|