Ajax asynchronous login and verification,

Ajax asynchronous login and verification,

This article describes the code for implementing logon and verification in Ajax asynchronous mode and shares it with you for your reference. The details are as follows:

Logon code

This is implemented using the Bootstrap3 component function.

<Div class = "login_con_R"> 
Code of the asynchronous login request

<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, 'user name cannot be blank ') {return false;} if (! Validation. notNull ($ ('body'), passwordElement, password, 'password cannot be blank ') {return false;} btnLogin. attr ('Disabled ', 'disabled' login .html (' logging on... '); 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: 'login successful! '});/* The asynchronous request used here. When the request is successfully logged on, locate the index page again */window. location. href = contextPath + "/index. koala ";} else {btnlogin.removeattr('disabled'login .html ('login'); $ ('. login_con_R '). message ({type: 'error', content: data. errorMessage}) ;}}}); </script>
Verification js code Validation. js used

Validator = {Require: {expression :/. +/, errorMsg: "This field cannot be blank"}, Email: {expression:/^ \ w + ([-+.] \ w +) * @ \ w + ([-.] \ w + )*\. \ w + ([-.] \ w +) * $/, errorMsg: "Incorrect Email format"}, Mobile: {expression: /^ (1 [3 | 5 | 8] {1} \ d {9}) $/, errorMsg: "Incorrect mobile phone format"}, TelePhone: {expression: /^ (0 \ d {2, 3 }-)? \ D {7, 8} (-\ d {4 })?)) $/, ErrorMsg: "Incorrect Phone Number Format"}, IdCard: {expression:/^ \ d {15} (\ d {2} [A-Za-z0-9])? $/, ErrorMsg: "Incorrect ID card Number format"}, Number: {expression:/^ -? (\ D + | [1-9] \ d * \. \ d + | 0 \. \ d * [1-9] \ d * | 0? \. 0 + | 0) $/, errorMsg: "Only numbers are supported"}, English: {expression:/^ [A-Za-z] + $/, errorMsg: "Only English characters are supported"}, Chinese: {expression:/^ [\ u0391-\ uFFE5] + $/, errorMsg: "Only Chinese characters are supported"}, URL: {expression:/^ http: \/[A-Za-z0-9] + \. [A-Za-z0-9] + [\/= \? % \-&_~ '@ [\] \': +!] * ([^ <> \ "\"]) * $/, ErrorMsg: "incorrect URL format"}, Regex: {errorMsg: "Incorrect format "}, unSafe:/^ ([A-Z] * | [a-z] * | \ d * | [-_\~! @ # \ $ % \ ^ & \ * \. \ (\) \ [\] \ {\} <> \? \/\ '\ "] *) |. {0, 5}) $ | \ s/, IsSafe: function (str) {return! This. unSafe. test (str) ;}, SafeString: {expression: "this. isSafe (value) ", errorMsg:" Only Chinese characters are supported "}, ErrorItem: [document. forms [0], ErrorMessage: ["failed to submit due to the following reasons: \ 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) ;}}}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 "NotEqua L ": 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 (gr Oups [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 ;}}; /*** check whether it is empty */var isNull = function (item) {if (item = null | item = "" | item. replace (/(^ \ s *) | (\ s * $)/g, "") = "") {return true;} return false ;}; /*** display prompt information */var showErrorMessage = function ($ container, $ element, content) {$ element. popover ({content: content, trigger: 'manual', container: $ container }). popover ('show '). on ({'blur': function () {$ element. popover ('deststroy'); $ element. parent (). removeClass ('has-error');}, 'keylow': function () {$ element. popover ('deststroy'); $ element. parent (). removeClass ('has-error ');}}). focus (). parent (). addClass ('has-error ');};
I hope this article will help you learn more.
Articles you may be interested in:

 

 
  
A simple example of AJAX combined with PHP code to achieve login effect code
 
  
Jquery ajax login verification implementation code
 
  
A classic ajax login page background asp.net
 
  
Implementation of jQuery + Ajax User Logon
 
  
JQuery. ajax User Logon Verification Code
 
  
Detailed description of jquery ajax-based loose logon methods
 
  
S2SH integrates JQuery + Ajax to implement the login verification function and code
 
  
If jquery + ajax verification fails, the system submits the form for troubleshooting.
 
  
JQuery + AJAX: Mask Layer logon verification interface (with source code)