Home > Developer > Web Develop
1 compatible IE678
2 Suitable for web development
Html:
<script src= "Js/jquery-1.11.3.js" ></script>
<script type= "Text/javascript" >
$ (function () {
User name loses focus
$ ("#userName"). On ("KeyUp blur", function () {
Usernamecheck ();
});
Password loses focus
$ ("#pwd"). On ("KeyUp blur", function () {
Pwdcheck ();
});
Confirm Password loses focus
$ ("#pwdConfirm"). On ("KeyUp blur", function () {
Pwdconfirmcheck ();
});
Mailbox loses focus
$ ("#email"). On ("KeyUp blur", function () {
Emailcheck ();
});
Submit
$ ("#reg"). Click (function () {
if (usernamecheck () = = False | | Pwdcheck () = = False | | Pwdconfirmcheck () ==false| | Emailcheck () ==false)
{
Alert ("Check form");
Return
}
else {
$.ajax ({
Type: "Post",
URL: "Submit.aspx",
Data: $ ("form"). Serialize (),
Success:function (RESPONSE,STATUS,XHR) {
if (response== "Success")
{
Alert ("Registered successfully!");
window.location = "htmlpage1.html";
}
else {
Alert ("Registration failed!");
}
},
Error:function () {
Alert ("Ajax error");
}
});
}
});
$ (document). Ajaxstart (function () {
$ ("#div1"). Show ();
}). Ajaxstop (function () {
$ ("#div1"). Hide ();
});
});
Verify the mailbox format
function Checkemail (str) {
var re =/^ (\w-*\.*) [email protected] (\w-?) + (\.\w{2,}) +$/;
if (Re.test (str)) {
return true;
}
else {
return false;
};
};
function Usernamecheck () {
var userName = $ ("#userName"). Val ();
User name cannot be empty
if (UserName = = "") {
$ ("#label_UserName"). HTML ("<strong style= ' color:red ' > username cannot be empty!</strong>");
$ ("#userName") [0].focus ();
return false;
}
else {
$.ajax ({
Type: "Post",
URL: "Ajax.aspx",
Data: $.param ({userName: $ ("#userName"). Val ()}),
Success:function (response, status, XHR) {
if (response = = "OK") {
$ ("#label_UserName"). html ('
return true;
}
else {
$ ("#label_UserName"). HTML ("<strong style= ' color:red ' > user name already exists!</strong>");
return false;
}
}
});
}
};
function Pwdcheck () {
var pwd = $ ("#pwd"). Val ();
if (pwd = = "") {
$ ("#lable_pwd"). HTML ("<strong style= ' color:red ' > password cannot be empty!</strong>");
$ ("#pwd") [0].focus ();
return false;
}
else {
if (Pwd.length < 6) {
$ ("#lable_pwd"). HTML ("<strong style= ' color:red ' > Password must not be less than 6 bits!</strong>");
return false;
}
else {
$ ("#lable_pwd"). html ('
return true;
}
}
};
function Pwdconfirmcheck () {
var pwdconfirm = $ ("#pwdConfirm"). Val ();
if (pwdconfirm = = "") {
$ ("#label_pwdConfirm"). html (' <strong style= "color:red" > Confirm password cannot be null!</strong> ');
return false;
}
else {
if ($ ("#pwdConfirm"). val ()! = $ ("#pwd"). Val ()) {
$ ("#label_pwdConfirm"). html (' <strong style= ' color:red ' > Two input passwords are inconsistent, please re-enter!</strong> ');
return false;
}
else {
$ ("#label_pwdConfirm"). html ('
return true;
}
}
};
function Emailcheck () {
var email = $ ("#email"). Val ();
if (email = = "") {
$ ("#label_email"). html (' <strong style= ' color:red ' > Mailbox cannot be empty!</strong> ');
return false;
}
else {
if (checkemail (email) = = False) {
$ ("#label_email"). html (' <strong style= ' color:red ' > Mailbox format incorrect!</strong> ');
return false;
}
else {
$ ("#label_email"). html ('
return true;
}
}
}
</script>
<style type= "Text/css" >
#div1 {
width:180px;
height:140px;
Display:none;
Font-weight:bold;
color:red;
}
</style>
<body>
<form>
<table>
<tr>
<td> User name:</td>
<td><input type= "text" id= "UserName" name= "UserName"/><span style= "color:red;" >*</span><label id= "Label_username" ></label></td>
</tr>
<tr>
<td> Password:</td>
<td><input type= "text" id= "pwd" name= "pwd"/><span style= "color:red;" >*</span><label id= "Lable_pwd" ></label></td>
</tr>
<tr>
<td> Confirm Password:</td>
<td><input type= "text" id= "pwdconfirm" name= "pwdconfirm"/><span style= "color:red;" >*</span><label id= "Label_pwdconfirm" ></label></td>
</tr>
<tr>
<td> Email:</td>
<td><input type= "text" id= "email" name= "email"/><span style= "color:red;" >*</span><label id= "Label_email" ></label></td>
</tr>
<tr>
<td><input id= "Reg" type= "button" value= "Submit"/></td>
<td></td>
</tr>
</table>
<div id= "Div1" > is being submitted, please wait ......</div>
</form>
</body>
Use jquery to write an example of registration validation (VS2013)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
