Detailed explanation of form validation based on PHP+Ajax_PHP tutorial

First, use keyboard response to verify whether the form input is legal without refreshing the page
Users trigger response events through onkeydown and onkeyup events. The usage method is similar to the onclick event. onkeydown means that it is triggered when a key on the keyboard is pressed, and onkeyup is just the opposite, triggering when a key on the keyboard is pressed and then lifted.
Two commonly used calling methods:
(1) Add the event to the page element. When the user completes inputting 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. The format is as follows:

Copy the code The code is as follows:

(2) Loaded through window.onload, when the page is loaded, the event is loaded. When the user enters information, this event will be triggered every time a letter is entered. In the function called by the event, the user's input information is judged.

Copy code The code is as follows:

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

Using the onkeydown event can also achieve specific key Control, including the key (event.keyCode==13), the space bar (event.keyCode==32), the key, the key, etc., this is done through the onkeydown event This is achieved using the keyCode attribute. The KeyCode property knows which key the user pressed.

2. Registration information verification
General function, returns the triggered id element object

Copy code The code is as follows:

function $(id){
return document.getElementById(id);
}
window.onload event, indicating the current window Fired when loaded. function(){...} represents the operation to be performed when the current page is loaded.
window.onload = function(){
...
}

function() function analysis;
First position the focus on User name text box to facilitate user operations. Next, 5 variables are declared, which represent the results of the 5 data to be detected. When the test data is qualified, set the variable value to "yes".

Copy the code The code is as follows:

$( 'regname').focus();
var cname1,cname2,cpwd1,cpwd2; //Five variables are declared, indicating the five items of data to be detected. The chkreg() function is called every time a keyboard event is triggered. , this function determines the values ​​of 5 variables. Only when all 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;
}
}

Next, verify the user name. When the user enters the registration name, this function will make a regular judgment on each input of the user, and set different cname1 values ​​based on the results.

Copy code The code is as follows:

$('regname').onkeyup = function (){
name = $('regname').value; //Get the registered name
cname2 = '';
if(name.match(/^[a-zA-Z_]*/) == ''){
$('namediv').innerHTML = 'Must start with a letter or underscore';
cname1 = '';
}else if(name.length <= 3){
$('namediv').innerHTML = 'The registered name must be greater than 3 characters';
cname1 = '';
}else{
$('namediv').innerHTML = 'The registered name meets the standards';
cname1 = 'yes';
}
chkreg(); //Call the chkreg() function to determine whether the five variables are correct
}

When the username text box loses focus, that is, when the user completes input and moves to other elements on the page, it will detect whether the username is repeated. The user name judgment uses Ajax technology to call chkname.php (the user name verification code of this page will be posted later) and the judgment result is displayed in the div tag based on the return value of chkname.php.

Copy code The code is as follows:

$('regname').onblur = function(){
name = $('regname').value; //Get the registered name
if(cname1 == 'yes'){ //Only do this step when the format of the user name is qualified
xmlhttp.open('get ','chkname.php?name='+name,true); //open() creates XMLHttpRequest to initialize the connection, and Ajax creates a new request
xmlhttp.onreadystatechange = function(){ //When XMLHttpRequest is specified as asynchronous transmission (false), if any state change occurs, the object will call the function specified by onreadystatechange
if(xmlhttp.readyState == 4){ //XMLHttpRequest processing status, 4 means processing is completed
if(xmlhttp. status == 200){ //HTTP code of the server response, 200 means normal
var msg = xmlhttp.responseText; //Get the content of the response page
if(msg == '1'){ //chkname .php page searches the database, the database does not have the user and returns 1
                                                                                                                                                                                                                              . > cname2 = 'yes';
}else if(msg == '2'){ //The user exists in the database and returns 0
$('namediv').innerHTML=" Username is occupied! ";
cname2 = '';
}
}
}
}
xmlhttp.send(null);
chkreg(); // Detect whether the registration button is activated
}
}


Verify the password. When verifying the password, in addition to limiting the length of the password, you can also judge the strength of the password.

Copy code

The code is as follows:$('regpwd1').onkeyup = function(){ pwd = $('regpwd1').value;

pwd2 = $('regpwd2').value;

if(pwd.length < 6){
$('pwddiv1').innerHTML = '< ;font color=red>The password length needs to be at least 6 characters';
cpwd1 = '';
}else if(pwd.length >= 6 && pwd.length < 12){
$('pwddiv1').innerHTML = 'The password meets the requirements. Password strength: weak';
cpwd1 = 'yes';
}else if((pwd.match(/^[0-9]*$/)!=null) || ( pwd.match(/^[a-zA-Z]*$/) != null )){
$('pwddiv1').innerHTML = 'The password meets the requirements. Password strength: Medium';
cpwd1 = 'yes';
}else{
$('pwddiv1').innerHTML = 'The password meets the requirements. Password strength: high';
cpwd1 = 'yes';
}
if(pwd2 != '' && pwd != pwd2){
$('pwddiv2') .innerHTML = 'The two passwords are inconsistent!';
cpwd2 = '';
}else if(pwd2 != '' && pwd == pwd2){
$('pwddiv2').innerHTML = 'The password is entered correctly';
cpwd2 = 'yes';
}
chkreg();
}


Judgement of the secondary password is relatively simple, just judge whether the second password input is equal to the first input.

Copy code

The code is as follows:$('regpwd2').onkeyup = function(){ pwd1 = $('regpwd1').value;

pwd2 = $('regpwd2').value;

if(pwd1 != pwd2){
$('pwddiv2').innerHTML = 'The two passwords are inconsistent!';
cpwd2 = '';
}else{
$('pwddiv2').innerHTML = ' The password is entered correctly';
cpwd2 = 'yes';
}
chkreg();
}


The above information must be filled in. If the user wants to fill in more detailed information, they can click the "Details Button"

Copy the code The code is as follows:

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

E-mail format verification, the input string must contain @ and ., and the positions of these two strings cannot be at the beginning or end or connected together

Copy code The code is as follows:

$('email').onkeyup = function(){
emailreg = /^w+([-+.]w+)*@w+([- .]w+)*.w+([-.]w+)*$/;
$('email').value.match(emailreg);
if($('email').value.match (emailreg) == null){
$('emaildiv').innerHTML = 'wrong email format';
cemail = '';
}else{
$('emaildiv').innerHTML = 'Enter correctly';
cemail = 'yes';

}
chkreg (); 🎜>Copy code

The code is as follows:

session_start();
include_once "conn/conn.php";$reback = '0';$sql = "select * from tb_member where name='".$_GET['name']."'";

$num = $conne->getRowsNum($sql) ;if($num == 1){ $reback = '2';}else if($num == 0){ $reback = '1';

}else{

$reback = $conne->msg_error();
}
echo $reback;
?>




4. XMLHttpRequest function initialization





Copy code

The code is as follows:

// JavaScript Document var xmlhttp = false;
if (window.XMLHttpRequest) { //Mozilla, Safari and other browsers xmlhttp = new XMLHttpRequest();}

else if (window.ActiveXObject) { IE browser try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" );

} catch (e) {}
}
}





http://www.bkjia.com/PHPjc/327864.html

www.bkjia.com

true

http: //www.bkjia.com/PHPjc/327864.html

TechArticle

1. Use keyboard response to verify whether the form input is legal without refreshing the page. The user passes onkeydown and onkeyup event to trigger a response event. Usage methods and onclick event classes...

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn