PHP User Registration page Use JS for form verification Concrete instance _php instance

Source: Internet
Author: User
Tags lowercase valid email address
Copy Code code as follows:



<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


<html xmlns= "http://www.w3.org/1999/xhtml" >


<head>


<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>


<title> User Registration-cloud-dwelling community </title>


<link href= ". /css/login.css "rel=" stylesheet "type=" Text/css "/>"


<link href= ". /css/page_bottom.css "rel=" stylesheet "type=" Text/css "/>"


<script type= "Text/javascript" src= ". /js/jquery-1.7.1.js "></script>


<script type= "Text/javascript" >


var flag = {


"Email": false,


"nickname": false,


"Password": false,


"Verify": false


};





$ (function () {


$ ("#txtEmail"). blur (function () {


var email=$ (this). Val ();


alert (email);


if (email== "") {


$ ("#email \\.info"). HTML ("Email address cannot be empty");


Return


}


var pattern=/\b (^[' _a-za-z0-9-]+ (\.[') _a-za-z0-9-]+) *@ ([a-za-z0-9-]) + (\.[ a-za-z0-9-]+) * (\.[ A-za-z0-9]{2,}) | (\. [A-za-z0-9] {2,}\. [A-za-z0-9] {2,})) $) \b/;


if (!pattern.test (email)) {


$ ("#email \\.info"). HTML ("Incorrect email format");


Return


}


$.get ("check_email.php?email=" +email,null,


function (data) {


$ ("#email \\.info"). HTML (data);


if (data== "can register") {


Flag.email=true;


}


}


);


});


$ ("#txtNickName"). blur (function () {


var nickname=$ (this). Val ();


if (nickname== "") {


$ ("#name \\.info"). HTML ("Nickname cannot be empty");


Return


}


var pattern =/\b (^[' a-za-z0-9]{4,20}$) \b/;


if (!pattern.test (nickname)) {


$ ("#name \\.info"). HTML ("Nickname format is not correct");


Return


}else{


$ ("#name \\.info"). HTML ("nickname format is correct");


Flag.nickname=true;


Return


}


});


$ ("#txtPassword"). blur (function () {


var password=$ (this). Val ();


if (password== "") {


$ ("#password \\.info"). HTML ("Password cannot be blank");


Return


}


var pattern =/\b (^[' a-za-z0-9]{4,20}$) \b/;


if (!pattern.test (password)) {


$ ("#password \\.info"). HTML ("Incorrect password format");


Return


}else{


$ ("#password \\.info"). HTML ("password format correct");


Flag.password=true;


Return


}


});


$ ("#txtRepeatPass"). blur (function () {


var password1=$ (this). Val ();


if (password1== "") {


$ ("#password1 \\.info"). HTML ("Password cannot be blank");


Return


}


var pattern =/\b (^[' a-za-z0-9]{4,20}$) \b/;


if (!pattern.test (Password1)) {


$ ("#password1 \\.info"). HTML ("Incorrect password format");


Return


}else if (password1!=$ ("#txtPassword"). Val ()) {


$ ("#password1 \\.info"). HTML ("Two input passwords inconsistent");


Return


}else{


$ ("#password1 \\.info"). HTML ("Duplicate password correct");


Flag.password=true;


Return


}


});


$ ("#txtVerifyCode"). blur (function () {


var verify=$ (this). Val ();


if (verify== "") {


$ ("#number \\.info"). HTML ("Verify code cannot be empty");


Return


}


$.post ("./verify/check.php", {verify:verify},


function (data) {


$ ("#number \\.info"). HTML (data);


if (data== "validation succeeded") {


Flag.verify=true;


}


}


);


})


$ ("#f"). Submit (function () {


var ok = flag.email&&flag.password&&flag.verify&&flag.nickname;


if (Ok==false) {


Alert ("A table item is being detected or has an error");


History.back ();


return false;


}


return true;


});


})


</script>


</head>


<body>


<?php include (".. /common/head.php ");?>


<div class= "Login_step" >


Registration step: <span class= "Red_bold" >1. Fill in the Information </span> > 2. Verify mailbox > 3. Registration successful


</div>


<div class= "Fill_message" >


<form name= "ctl00" method= "post" action= "save_reg.php" id= "F" >


<h2> all of the following are required </h2>


<table class= "Tab_login" >


<tr>


<TD valign= "Top" class= "W1" > Please fill in your email address:</td>


<td>


<input name= "Email" type= "text" id= "Txtemail" class= "Text_input"/>


<div class= "Text_left" id= "emailvalidmsg" >


<p> please fill in a valid email address. </p>


<span id= "Email.info" style= "color:red" ></span>


</div>


</td>


</tr>


<tr>


<TD valign= "Top" class= "W1" > Set your nickname in the cloud-dwelling community:</td>


<td>


<input name= "nickname" type= "text" id= "Txtnickname" class= "Text_input"/>


<div class= "Text_left" id= "nicknamevalidmsg" >


<p> consists of lowercase English letters, Chinese, numbers, length 4-20 characters, one Chinese character is two characters. </p>


<span id= "Name.info" style= "color:red" ></span>


</div>


</td>


</tr>


<tr>


<TD valign= "Top" class= "W1" > Set Password:</td>


<td>


<input name= "password" type= "password" id= "Txtpassword" class= "Text_input"/>


<div class= "Text_left" id= "passwordvalidmsg" >


<p> your password can be written in uppercase and lowercase letters, numbers, 6-20-bit length. </p>


<span id= "Password.info" style= "color:red" ></span>


</div>


</td>


</tr>


<tr>


<TD valign= "Top" class= "W1" > Retype the password you set:</td>


<td>


<input name= "password1" type= "password" id= "Txtrepeatpass" class= "Text_input"/>


<div class= "Text_left" id= "repeatpassvalidmsg" >


<span id= "Password1.info" style= "color:red" ></span>


</div>


</td>


</tr>


<tr>


<TD valign= "Top" class= "W1" > Authentication Code:</td>


<td>


<img class= "yzm_img" id= ' Imgvcode ' src= '/verify/verify.php ' "style=" "cursor:pointer" 0 ' border= " document.getElementById (' Imgvcode '). src= './verify/verify.php?t= ' +math.random () "/>


<input name= "number" type= "text" id= "Txtverifycode" class= "Yzm_input"/>


<div class= "Text_left T1" >


<p class= "T1" >


<span id= "vcodevalidmsg" > Please enter four letters in the picture. </span>


<a href= "#" style= "Cursor:pointer" onclick= "document.getElementById (' Imgvcode '). src= './verify/verify.php?t= ' + Math.random () "> Can't see clearly?" Change a picture </a>


<br/>


<span id= "Number.info" style= "color:red" ></span>


</p>


</div>


</td>


</tr>


</table>





<div class= "Login_in" >


<input id= "Btnclientregister" class= "button_1" name= "Submit" type= "submit" value= "register"/>


</div>


</form>


</div>


<?php include (".. /common/foot.php ");?>


</body>


</html>


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.