Service-side code there's no
.
HTML code is simpler and needs to be introduced into the jquery library
Copy Code code as follows:
<body>
Please enter user name: <input type= "text" id= "UserName" class= "Usertext"/> <input "button" type= "checksum" value= "id=" />
<div id= "Result" ></div>
</body>
JS Code
Copy Code code as follows:
/*
* Register these jobs when page load is complete
* */
$ (document). Ready (function () {
This is the code that needs to be executed after the page is loaded
var Usernamenode = $ ("#userName");
Need to find button press, register event
$ ("#verifyButton"). Click (function () {
1. Get the contents of the text box
var userName = Usernamenode.val ();
2. Send this content to server side
if (UserName = = "") {
Alert ("User name cannot be empty");
} else {
$.get ("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI (encodeURI (UserName)), Null,function ( Response) {
3. Receive server-side returned data, fill in div
$ ("#result"). HTML (response);
});
}
});
Need to find text box, register event
Usernamenode.keyup (function () {
Get the contents of the current text box
var value = Usernamenode.val ();
if (value = = "") {
Make the border red and take a background image
Usernamenode.addclass ("Usertext");
} else {
Remove borders and background images
Usernamenode.removeclass ("Usertext");
}
});
});
CSS style, so that when there is no content in the text box, the border is red and there is a red wave underneath it
Copy Code code as follows:
. usertext {
/* Control the border of the text box is a red solid line * *
border:1px solid red;
Background-image:url (.. /images/userverify.gif);
Background-repeat:repeat-x;
Background-position:bottom;
}
