
平台论坛博客文库

› 论坛 › 程序设计 › Web开发 › JS验证

JS验证 [复制链接]

中关村村草

小富即安

论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2011-12-13 21:26 |只看该作者 |倒序浏览

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>