Detailed implementation of form validation based on PHP+Ajax

1. Use keyboard response to verify whether the form input is valid without refreshing the page
The user triggers the response event via onkeydown and onkeyup events. The usage is similar to the onclick event. onkeydown is the opposite of onkeyup, which is triggered when a key on the keyboard is pressed and raised.
Two common invocation methods:
(1) Add the event to the page element. When the user enters the information and clicks any key, the onkeydown event is triggered and the refer() function is called.
This method is the simplest and most direct and has the following format:

<script type="text/javascript">
   ...
   function refer(){
   ...
   }
</script>
<input type="text" onkeydown="refer()"/>  

(2) Loading via ES14en.onload. When the page is loaded, the event is loaded. When the user enters information, each letter of input triggers the event, and the user input information is judged in the function called by the event.

window.onload = function(){
 $('regname').onkeydown = function (){
  name = $('regname').value;
 }
}

Using the onkeydown event also gives you control over specific keys, including < Enter > Key (event. keyCode==13), space bar (event. keyCode==32), < Ctrl > The key, < Alt > Keys, etc., by using the keyCode attribute in the onkeydown event. The KeyCode property tells you which key the user pressed.

2. Registration information verification
Generic function that returns the triggered id element object

function $(id){
 return document.getElementById(id);
}
window.onload Event that is triggered when the current window is loaded. function(){...} Represents the action to be taken when the current page is loaded. 
window.onload = function(){
 ...
}

function() function analysis;
First, the focus is positioned to the user name text box for easy user operation. The next step is to declare five variables that represent the results of the five data to be tested. When the test data is qualified, set the variable value to "yes".

$('regname').focus();
var cname1,cname2,cpwd1,cpwd2;  // The statement 5 The variables represent the ones to be tested 5 Item data chkreg() Each function is 1 This function determines which keyboard events are called each time they are triggered 5 The value of the variables, only if all the variables are "yes" , the registration button will be activated.  
function chkreg(){
 if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes')){
  $('regbtn').disabled = false;
 }else{
  $('regbtn').disabled = true;
 }
}

When a user enters a registered name, this function makes a regular judgment on each user's input and sets a different value of cname1 based on the result.

$('regname').onkeyup = function (){
 name = $('regname').value;  // Get the registration name 
 cname2 = '';
 if(name.match(/^[a-zA-Z_]*/) == ''){
  $('namediv').innerHTML = '<font color=red> It must begin with a letter or an underscore </font>';
  cname1 = '';
 }else if(name.length <= 3){
  $('namediv').innerHTML = '<font color=red> The registered name must be greater than 3 position </font>';
  cname1 = '';
 }else{
  $('namediv').innerHTML = '<font color=green> The registered name meets the standard </font>';
  cname1 = 'yes';
 }
 chkreg(); // call chkreg() Function, judgment 5 Are the variables correct 
}

When the user name text box loses focus, that is, when the user completes the input and moves to other elements in the page, the user name is detected for duplication. The user name judgment calls chkname. php using Ajax technology (the user name verification code for this page will be posted later) and displays the result in the div tag based on the return value of ES56en. php.

$('regname').onblur = function(){
 name = $('regname').value;  // Get the registration name 
 if(cname1 == 'yes'){ // Do not do this until the format input of the user name is qualified 1 step 
  xmlhttp.open('get','chkname.php?name='+name,true);  //open() create XMLHttpRequest Initialize the connection, Ajax Create a new request 
  xmlhttp.onreadystatechange = function(){  // When specifying XMLHttpRequest Is for asynchronous transmission (false), This object will be called if any state change occurs onreadystatechange The function specified 
   if(xmlhttp.readyState == 4){  //XMLHttpRequest Processing state, 4 Indicates completion of processing 
    if(xmlhttp.status == 200){ // Server responsive HTTP The code, 200 Is normal 
     var msg = xmlhttp.responseText;  // Gets the contents of the response page 
     if(msg == '1'){  //chkname.php The page looks for the database and the database does not return the user 1
      $('namediv').innerHTML="<font color=green> Congratulations, the user name is available !</font>";
      cname2 = 'yes';
     }else if(msg == '2'){ // The database exists for this user return 0
      $('namediv').innerHTML="<font color=red> User name is occupied! </font>";
      cname2 = '';
     }else{
      $('namediv').innerHTML="<font color=red>"+msg+"</font>";
      cname2 = '';
     }
    }
   }
  }
  xmlhttp.send(null);
  chkreg(); // Checks whether the registration button is activated 
 }
}

Verify passwords. In addition to limiting the length of the password, you can also determine the strength of the password.

$('regpwd1').onkeyup = function(){
 pwd = $('regpwd1').value;
 pwd2 = $('regpwd2').value;
 if(pwd.length < 6){
  $('pwddiv1').innerHTML = '<font color=red> Minimum password length is required 6 position </font>';
  cpwd1 = '';
 }else if(pwd.length >= 6 && pwd.length < 12){
  $('pwddiv1').innerHTML = '<font color=green> The password meets the requirements. Password strength: Weak </font>';
  cpwd1 = 'yes';
 }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
  $('pwddiv1').innerHTML = '<font color=green> The password meets the requirements. Password strength: medium </font>';
  cpwd1 = 'yes';
 }else{
  $('pwddiv1').innerHTML = '<font color=green> The password meets the requirements. Password strength: High </font>';
  cpwd1 = 'yes';
 }
 if(pwd2 != '' && pwd != pwd2){
  $('pwddiv2').innerHTML = '<font color=red> Twice password no 1 to !</font>';
  cpwd2 = '';
 }else if(pwd2 != '' && pwd == pwd2){
  $('pwddiv2').innerHTML = '<font color=green> Password entered correctly </font>';
  cpwd2 = 'yes';
 }
 chkreg();
}

The second password is easy to determine, as long as the second input password is equal to the first input.

$('regpwd2').onkeyup = function(){
 pwd1 = $('regpwd1').value;
 pwd2 = $('regpwd2').value;
 if(pwd1 != pwd2){
  $('pwddiv2').innerHTML = '<font color=red> Twice password no 1 to !</font>';
  cpwd2 = '';
 }else{
  $('pwddiv2').innerHTML = '<font color=green> Password entered correctly </font>';
  cpwd2 = 'yes';
 }
 chkreg();
}

If the user wants to fill in more detailed information, he can click the "Details button".

$('morebtn').onclick = function(){
 if($('morediv').style.display == ''){
  $('morediv').style.display = 'none';
 }else{
  $('morediv').style.display = '';
 }
}

The E-mail format verifies that the input string must contain @ and., and that the positions of the two strings must neither end nor end together at 1

$('email').onkeyup = function(){
 emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 $('email').value.match(emailreg);
 if($('email').value.match(emailreg) == null){
  $('emaildiv').innerHTML = '<font color=red> The wrong email format </font>';
  cemail = '';
 }else{
  $('emaildiv').innerHTML = '<font color=green> Input the correct </font>';
  cemail = 'yes';

 }
 chkreg();
}

3. Test user name (ES76en.php)

window.onload = function(){
 $('regname').onkeydown = function (){
  name = $('regname').value;
 }
}

0
4, XMLHttpRequest function initialization

// JavaScript Document
var xmlhttp = false;
if (window.XMLHttpRequest) {          //Mozilla , Safari Such as the browser 
 xmlhttp = new XMLHttpRequest();
} 
else if (window.ActiveXObject) {         //IE The browser 
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
 }
}