jquery $.ajax detects if a user name exists

Last Update:2017-01-13 Source: Internet

Author: User

Tags php tutorial

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In many cases, we have to make users feel good for the user experience, today we provide a jquery $.ajax detect the existence of a user name, is to provide authentication user to register user name is available, this function must also be implemented by Ajax, the following provides two jquery Ajax Detects a user name instance.

<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title>jquery $.ajax Detect if user name exists </title>
<script language = "web effects" src = "jquery-1.3.2.min.js" type = "Text/javascript" ></script>
<script language = "javascript" src = "validator.js" type = "Text/javascript" ></script>
<link type = "Text/css tutorial" rel= "stylesheet" href = "validator.css"/>
<body>
<div>
User name: <input id= "txtname" type= "text" class = "txtname"/>
<div id = "Result" ></div>
</div>
</body>

Next is JS, you can download your own online Jquery-1.3.2.min.js class library, I do not provide here.

Create the Validator.js code as follows:

$ (function () {
    var txtname = $ ("#txtname");
   //text box style when entering text br>     Txtname.keyup (function () {
        var name = $ (this). Val ();
        if (name = = "")
             $ (this). addclass ("txtname");
        Else $ (this). Removeclass ("txtname");
   })
Verify that the user name is available when    //loses focus
    $ ("#txtname"). blur (function () {
         var name = $ (this). Val ();
        $.get ("thylx.asp tutorial x?name=" + name, NULL, function (response) {
            $ ("#result"). HTML (response);
       })

   })
})

Oh, is how a few lines of code, more than JS easy to use ~ ~

The last is to create the Thylx.aspx,thylx.aspx.cs code as follows: (here ASPX pages are not edited, we're just doing data manipulation,)

protected void Page_Load (object sender, EventArgs e)
{
String name = request.querystring["Name"].tostring ();
if (name = = "THYLX")
Response.Write ("The username already exists!") ");
Else
Response.Write ("This user name can be used!") ");
}

Next look at a style jquery.validate and Ajax to verify the user repeat
Jquery.validate, no doubt, Jquery.validate is a powerful form validation plug-in.
But in unfamiliar situations, it is difficult to use it flexibly. I'll talk about the problems I encountered in the process of using him.
The function I want to implement is (simply do not say): Use Jquery.validate to verify that the user has been registered, if already registered, prompt. If you see here (if you are familiar with jquery.validate)

$ ("#myform"). Validate ({
Rules: {
Username: {
Required:true,
Remote: "check_user.php Tutorial"
}
}
});

If you want to use Jquery.validate for client authentication, you should also display such a message.

Remote1:function (value, element, param) {
if (this.optional (Element))
return "Dependency-mismatch";

var previous = This.previousvalue (element);

if (!this.settings.messages[element.name])
This.settings.messages[element.name] = {};
This.settings.messages[element.name].remote1 = typeof Previous.message = = "function"? Previous.message (value): Previous.message;

param = typeof param = = "string" && {Url:param} | | Param

if (previous.old!== value) {
Previous.old = value;
var validator = this;
This.startrequest (Element);
var data = {};
Data[element.name] = value;
$.ajax ($.extend (True, {
Url:param,
Mode: "Abort",
Port: "Validate" + Element.name,
DataType: "JSON",
Data:data,
Success:function (response) {
Here's where the main modifications, I returned a set of data in JSON
Response.data: Data
RESPONSE.MSG: The information returned
Response.Status: Returned status
var valid = Response.Status;
if (valid) {
var submitted = validator.formsubmitted;
Validator.prepareelement (Element);
validator.formsubmitted = submitted;
Validator.successlist.push (Element);
Validator.showerrors ();
} else {
var errors = {};
Take response.msg as its error message
Errors[element.name] = Previous.message = Response.info;
Validator.showerrors (Errors);
}
Previous.valid = valid;
Validator.stoprequest (element, valid);
}
}, param));
Return "Pending";
else if (This.pending[element.name]) {
Return "Pending";
}
return previous.valid;
}

The validation rules are written like this:

Rules: {
Txt_username: {
remote1:{
URL: "/uc_app/index.php",
Type: ' Post ',
Data: {
Act: ' Chkuser ',
Uid:function () {return $ ("#txt_username"). Val ();
}
},
Required:true,
Minlength:3,
Maxlength:10
}
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More