The code for the HTML page is as follows
<body>
<form action= "form.php" method= "post" id= "form" onsubmit= "return check ();" >
<table style= "600px;" cellspacing= "0" >
<tr>
<td> User name </td>
<td><input type= "text" name= "name" id= "name"/><span id= "res" ></span></td>
</tr>
<tr>
<td> Password </td>
<td><input type= "password" name= "pass" id= "pass"/></td>
</tr>
<tr>
<td> Confirm Password </td>
<td><input type= "Password" name= "Repass" id= "Repass"/></td>
</tr>
<tr>
<td> Mobile </td>
<td><input type= "text" name= "phone" id= "Phone"/></td>
</tr>
<tr>
<td> Email </td>
<td><input type= "text" name= "email" id= "email"/></td>
</tr>
<tr>
<TD colspan= "2" ><input type= "Submit" value= "submitted"/><input type= "reset" value= "reset"/></td>
</tr>
</table>
</form>
</body>
<script type= "Text/javascript" >
function Check () {
var name = $ ("#name"). Val ();
var pass = $ ("#pass"). Val ();
var Repass = $ ("#repass"). Val ();
var phone = $ ("#phone"). Val ();
var email = $ ("#email"). Val ();
if (name = = = ") {
Alert (' User name cannot be empty '); return false;
}
if (pass = = ") {
Alert (' Password cannot be null '); return false;
}else if (pass!= repass) {
Alert (' two times password inconsistent '); return false;
}
if (!) ( (/^1[3|5|8| 4][0-9]\d{8}$/). Test (phone)) {
Alert (' Please enter correct phone number '); return false;
}
if (!) ( (/^[a-za-z0-9]+@[a-za-z0-9]+\. [a-za-z]+$/). Test (email)) {
Alert (' Please enter the correct mailbox ');
}
return true;
}
$ (document). Ready (function () {
$ ("#name"). KeyUp (function () {
var xmlhttp;
if (window. XMLHttpRequest) {
XMLHTTP = new XMLHttpRequest ();
}else{
XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange=function () {
if (xmlhttp.readystate==4 && xmlhttp.status==200) {
document.getElementById ("res"). Innerhtml=xmlhttp.responsetext;
}
}
Xmlhttp.open ("Get", "form.php?=" +math.random () + ' &name= ' +$ (This). Val (), true);
Xmlhttp.send ();
})
})
</script>
form.php files are as follows:
<?php
Header ("Content-type:text/html;charset=utf-8");
$name = $_get[' name '];
For easy testing, set the default username to admin only
if ($name = = ' admin ') {
Echo ' <span style= ' color:green; > The user name can be </span> ';
}else{
Echo ' <span style= ' color:red; > should not be used </span> ';
}
?>
Here lazy, the default user name can only fill in admin, the actual use of the time, you can have the existence of user name and format and other verification
Note * Must introduce Jquery.js file
In the input username, give the input box a KeyUp event, through Ajax to form.php file submission data, detect the user name is available, so that the user name is not available, fill in when you can know.
To the form a onsubmit event, when clicked the Submit button, carries on the password, the telephone, the email foundation authentication, if the error, function check returns FALSE, prevents the form submission, returns true only when all data is filled in correctly The data is submitted to the from.php file for the relevant data operation.
In fact, this is still pure jquery Ajax, just JS native of an AJAX table validation example, no advantages, only for your reference.
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
