本文实例讲述了Ajax异步方式实现登录与验证的详细代码,分享给大家供大家参考。具体如下:
登录代码
这个是使用Bootstrap3的组件功能实现的
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<div class="login_con_R"> <h4>登录</h4> <FORM id="loginFormId" class="form-horizontal" action="login" method="post"> <div class="form-group input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="用户名" name="username" id="j_username" value="koala"> </div> <div class="form-group input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" name="password" id="j_password" class="form-control" placeholder="密码" value="888888"/> </div> <div class="form-group input-group" style="margin-top: 45px;"> <button type="button" class="btn btn-primary btn-block" id="loginBtn">登录</button> </div> </FORM> </div>
异步登录请求的代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52<script> $(function(){ var btnLogin = $('#loginBtn'); var form = $('#loginFormId'); $('body').keydown(function(e) { if (e.keyCode == 13) { dologin(); } }); btnLogin.on('click',function() { dologin(); }); var dologin = function() { var userNameElement = $("#j_username"); var passwordElement = $("#j_password"); var username = userNameElement.val(); var password = passwordElement.val(); if (!Validation.notNull($('body'), userNameElement, username, '用户名不能为空')) { return false; } if (!Validation.notNull($('body'), passwordElement, password, '密码不能为空')) { return false; } btnLogin.attr('disabled', 'disabled').html('正在登录...'); var param = form.serialize(); $.ajax({ url: contextPath+"/login.koala", dataType: "json", data: param, type: "POST", success: function(data){ if(data.success){ $('.login_con_R').message({ type: 'success', content: '登录成功!' }); /*这里使用的异步请求,当请求登录成功的时候,重新定位到index界面*/ window.location.href=contextPath+"/index.koala"; }else{ btnLogin.removeAttr('disabled').html('登录'); $('.login_con_R').message({ type: 'error', content: data.errorMessage }); } } }); }; }); </script>
使用到的验证js代码Validation.js
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229Validator = { Require : {expression:/.+/,errorMsg:"该字段不能为空"}, Email : {expression:/^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/,errorMsg:"Email格式不正确"}, Mobile:{expression:/^(1[3|5|8]{1}\d{9})$/,errorMsg:"手机格式不正确"}, TelePhone:{expression:/^(((0\d{2,3}-)?\d{7,8}(-\d{4})?))$/,errorMsg:"电话号码格式不正确"}, IdCard:{expression:/^\d{15}(\d{2}[A-Za-z0-9])?$/,errorMsg:"身份证号码格式不正确"}, Number:{expression:/^-?(\d+|[1-9]\d*\.\d+|0\.\d*[1-9]\d*|0?\.0+|0)$/,errorMsg:"仅支持数字"}, English:{expression:/^[A-Za-z]+$/,errorMsg:"仅支持英文字符"}, Chinese:{expression:/^[\u0391-\uFFE5]+$/,errorMsg:"仅支持中文字符"}, URL:{expression:/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,errorMsg:"URL地址格式不正确"}, Regex:{errorMsg:"格式不正确"}, UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, IsSafe : function(str){return !this.UnSafe.test(str);}, SafeString : {expression:"this.IsSafe(value)",errorMsg:"仅支持中文字符"}, ErrorItem : [document.forms[0]], ErrorMessage : ["以下原因导致提交失败:\t\t\t\t"], Validate : function(theForm, mode){ var obj = theForm || event.srcElement; var count = obj.elements.length; this.ErrorMessage.length = 1; this.ErrorItem.length = 1; this.ErrorItem[0] = obj; for(var i=0;i<count;i++){ with(obj.elements[i]){ if(disabled)continue; var _dataType = getAttribute("dataType"); if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; this.ClearState(obj.elements[i]); if(getAttribute("require") == "false" && value == "") continue; var errorMsg = getAttribute("errorMsg")? getAttribute("errorMsg") : this[_dataType].errorMsg; errorMsg = errorMsg || "invalid"; var validateExpr = getAttribute("validateExpr"); validateExpr = validateExpr || this[_dataType].expression; switch(_dataType){ case "Date" : case "Repeat" : case "Range" : case "Compare" : case "Custom" : case "Group" : case "Limit" : case "LimitB" : case "SafeString" : if(!eval(validateExpr)) { this.AddError(i, errorMsg); } break; default : if(!eval(validateExpr).test(value)){ this.AddError(i, errorMsg); } break; } } } if(this.ErrorMessage.length > 1){ var content = this.ErrorMessage[1].replace(/\d+:/," "); var $element = $(this.ErrorItem[1]); var name = $element.attr('name'); if(name.indexOf('DTO') != -1){ name = name.split('.')[1]; } var $targetElement = $element; var $tempElement = $targetElement.closest('form').find('#' + name + 'ID'); if($tempElement.hasClass('select')){ $targetElement = $tempElement; } showErrorMessage($element.closest('.modal'), $targetElement, content); return false; } return true; }, limit : function(len,min, max){ min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max; }, LenB : function(str){ return str.replace(/[^\x00-\xff]/g,"**").length; }, ClearState : function(elem){ with(elem){ if(style.color == "red") style.color = ""; var ligertipid = getAttribute("ligertipid"); if(ligertipid && ligertipid != ""){ removeAttribute("ligertipid"); $(elem).ligerHideTip(); } } }, AddError : function(index, str){ this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec : function(op, reg){ return new RegExp(reg,"g").test(op); }, compare : function(op1,operator,op2){ switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked : function(name, min, max){ var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for(var i=groups.length-1;i>=0;i--) if(groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, IsDate : function(op, formatString){ formatString = formatString || "ymd"; var m, year, month, day; switch(formatString){ case "ymd" : m = op.match(new RegExp("^\\s*((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})\\s*$")); if(m == null ) return false; day = m[6]; month = m[5]--; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy" : m = op.match(new RegExp("^\\s*(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))\\s*$")); if(m == null ) return false; day = m[1]; month = m[3]--; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default : break; } var date = new Date(year, month, day); return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()); function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} } }; var Validation = { notNull: function($container, $element, content, errorMessage) { if (isNull(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, email: function($container, $element, content, errorMessage) { var reg = new RegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, serialNmuber: function($container, $element, content, errorMessage) { var reg = new RegExp(/^[0-9a-zA-Z_-]*$/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, number: function($container, $element, content, errorMessage) { var reg = new RegExp(/^[0-9]*$/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, humanName: function($container, $element, content, errorMessage) { var reg = new RegExp(/(^[A-Z a-z]*$)|(^[\u4e00-\u9fa5]*$)/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, checkByRegExp: function($container, $element, regExp, content, errorMessage){ var reg = new RegExp(regExp); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; } }; /** * 检查是否为空 */ var isNull = function(item){ if(item == null || item == "" || item.replace(/(^\s*)|(\s*$)/g, "") == "" ){ return true; } return false; }; /** * 显示提示信息 */ var showErrorMessage = function($container, $element, content){ $element.popover({ content: content, trigger: 'manual', container: $container }).popover('show').on({ 'blur': function(){ $element.popover('destroy'); $element.parent().removeClass('has-error'); }, 'keydown': function(){ $element.popover('destroy'); $element.parent().removeClass('has-error'); } }).focus().parent().addClass('has-error'); };
希望本文所述对大家学习有所帮助。
最后
以上就是冷静白猫最近收集整理的关于Ajax异步方式实现登录与验证的全部内容,更多相关Ajax异步方式实现登录与验证内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复