Industry website User Registration AJAX validation Html+js fragment

Source: Internet
Author: User
Tags strlen

Register Effects page


The HTML code is as follows

The code is as follows Copy Code

<form action= "reg.php" method= "post" name= "RegForm" id= "RegForm" onsubmit= "return Checkregform ()" >
<table>
<tr>
<th> User name:</th>
<td><input name= "username" type= "text id=" username "maxlength=" "onblur=" CheckUser (this.value) "Value=" " />
<div id= "Html_username" >4-20 bit character or number, no special characters, no case </div></td>
</tr>
<tr>
<th> Unique Mailbox:</th>
<td><input name= "Email" type= "text" id= "email" maxlength= "onblur=" "Checkuseremail" (this.value) "Value=" " ><div id= "Html_email" > Mailbox can be used to retrieve the password, a mailbox can only register a user </div></td>
</tr>
<tr>
<th> Password:</th>
<td><input name= "U_password" type= "password" id= "U_password" maxlength= "onblur=" Checkpassword ( This.value) "/><div id=" Html_password > Please use a combination of 6-20-digit English letters, numbers, minus signs or underscores to distinguish case </div></td>
</tr>
<tr>
<th> Confirm Password:</th>
<td><input name= "Nextpassword" type= "password" id= "Nextpassword" maxlength= "onblur=" Checknextpassword ( This.value) "/><div id=" Html_nextpassword > Please re-enter the password above again </div></td>
</tr>
<tr>
<th> Verification Code:</th>
<td><input name= "U_code" type= "text" maxlength= "ten" id= "U_code" class= "Yzm" onblur= "Checkcode" (This.value) " ><div id= "Html_code" > enter the characters in the following picture </div></td>
</tr>
</table>


Above our careful friends will find that a lot of forms have a onblur event, this event is to tell us when we leave to verify that the form entered the correct content and in the <div id= "html_xxx" > display, note that each <div id= "Html_ XXX "> are the only page, we can look at the above code, the following core code is JS

The code is as follows Copy Code

//AJAX detects whether the user name has been registered
Function createxmlhttprequest () {//Create XMLHttpRequest Object
    if window. ActiveXObject) {//ie
        try {
             return new ActiveXObject ("Microsoft.XMLHTTP");
       } catch (e) {
             return;
       }
   } else if (window. XMLHttpRequest) {//mozilla,firefox
        try {
             return new XMLHttpRequest ();
       } catch (e) {
             return;
       }
   }
}

function CheckUser (username) {//Keynote
var xmlHttp = Createxmlhttprequest ();

if (username = = "") {
GetId ("Html_username"). InnerHTML = "<b> you entered failed, please re-enter </b>";
return false;
}
else if (!isusername (username)) {
GetId ("Html_username"). InnerHTML = "<b> please use 4-20-digit English letters, numbers, minus or underline combinations, case-insensitive </b>";
return false;
}

if (xmlHttp) {
Username = Username.tolowercase ();
var url = "/user/check_reg.php?act=check_username&username=" + escape (username);

callback = Getreadystatehandler (Xmlhttp,username);
Xmlhttp.onreadystatechange = callback;
Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL);
}
}

function Getreadystatehandler (xmlHttp) {//server returns post-processing functions
return function () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
if (Xmlhttp.responsetext = = "1") {
GetId ("Html_username"). InnerHTML = "<b>√ Congratulations, user name available </b>";
}
else if (Xmlhttp.responsetext = = "0") {
GetId ("Html_username"). InnerHTML = "<b> username has been registered, please re-enter </b>";
}
else {
GetId ("Html_username"). InnerHTML = "<b> you entered failed, please re-enter </b>";
}
}
}
}
}

Detection password
function Checkpassword (str) {
var str_html = getId ("Html_password");

if (str.length <= 5 | | | str.length >= 21) {
str_html.innerhtml = "<b> Please use a combination of 6-20-digit letters, numbers, minus signs or underscores to distinguish case </b>";
return false;
}
else if (!ispassword (str)) {
str_html.innerhtml = "<b> Please use a combination of 6-20-digit letters, numbers, minus signs or underscores to distinguish case </b>";
return false;
}
else {
str_html.innerhtml = "<b>√</b>";
}
}
function Checknextpassword (str) {
var str_html = getId ("Html_nextpassword");
var password = getId ("U_password"). Value;
var Html_password = getId ("Html_password");

if (password.length <= 5 | | | password.length >= 21) {
html_password.innerhtml = "<b> Please use a combination of 6-20-digit letters, numbers, minus signs or underscores to distinguish case </b>";
return false;
}
else if (!ispassword (password)) {
html_password.innerhtml = "<b> Please use a combination of 6-20-digit letters, numbers, minus signs or underscores to distinguish case </b>";
return false;
}
else if (str.length <= 5| | str.length >= 21) {
str_html.innerhtml = "<b> Please re-enter the password entered above </b>";
return false;
}
else if (password!= str) {
str_html.innerhtml = "<b> Two input password is not the same, please enter the new </b>";
return false;
}
else{
str_html.innerhtml = "<b>√</b>";
}
}

Detecting mailboxes
function Checkuseremail (str) {//main functions
var xmlHttp = Createxmlhttprequest ();
var str_html = getId ("Html_email");

if (str.length <= 0) {
str_html.innerhtml = "<b> please input email </b>";
return false;
}
else if (!isemail (str)) {
str_html.innerhtml = "<b> e-mail format is not correct </b>";
return false;
}

if (xmlHttp) {
var email = str.tolowercase ();
var url = "/user/check_reg.php?act=check_email&email=" + escape (email);

callback = Getreadystatehandleremail (xmlHttp, email);
Xmlhttp.onreadystatechange = callback;
Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL);
}
}

function Getreadystatehandleremail (xmlHttp) {//server returns post-processing functions
return function () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
if (Xmlhttp.responsetext = = "1") {
GetId ("Html_email"). InnerHTML = "<b>√ Congratulations, Mailbox available </b>";
}
else if (Xmlhttp.responsetext = = "0") {
GetId ("Html_email"). InnerHTML = "<b> mailbox has been registered, a mailbox can only register a user </b>";
}
else {
GetId ("Html_email"). InnerHTML = "<b> Please enter e-mail </b>";
}
}
}
}
}

Determine if the mailbox is correct
function Isemail (imail) {
var Emailpattern =/^\w+ (-\w+) | ( \.\w+)) *\@[a-za-z0-9]+ (\.| -) [a-za-z0-9]+) *\.[a-za-z0-9]+$/;

if (emailpattern.test (imail) = = False) {
return false;
}
else {
return true;
}
}

Determine if the username is correct, use a combination of 4-20 letters, numbers, underscores, bars (-)
function Isusername (str) {
var strpattern =/^[\w-]{4,20}$/;

if (strpattern.test (str) = = False) {
return false;
}
else {
return true;
}
}

Determine if the password is correct, use a combination of 6-20 letters, numbers, underscores, bars (-)
function Ispassword (str) {
var strpattern =/^[\w-]{6,20}$/;

if (strpattern.test (str) = = False) {
return false;
}
else {
return true;
}
}

Detection Verification Code
function Checkcode (str) {
var str_html = getId ("Html_code");
var str_len = StrLen (str);
if (Str_len <= 3 | | | Str_len >= 13) {
str_html.innerhtml = "<b> The number of characters you have entered is not </b>";
return false;
}
else {
str_html.innerhtml = "Enter the characters in the picture below";
}
}

Detect real names
function Checktruename (str) {
var truename = getId (str);
var html_truename = getId ("html_" + str);

if (StrLen (Truename.value) <= 2)
{
html_truename.innerhtml = "<b> Please enter your name </b>";
return false;
}
Else
{
html_truename.innerhtml = "<b>√</b>";
}
}

Detect mobile phone
function Checkmobile (str) {
var mobile = getId (str);
var html_mobile = getId ("html_" + str);

if (Mobile.value.length > 0) {
if (!/^[0-9]{11,30}$/.exec (Mobile.value)) {
html_mobile.innerhtml = "<b> jing input the correct mobile phone number, format for:18908476638</b>";
return false;
}
else {
Html_mobile.innerhtml= "<b>√</b>";
}
}
else {
html_mobile.innerhtml = "mobile phone and landline must fill in one, the format is: 18908476638";
}
}

Detection phone number
function Checktel (str) {
var tel = getId (str);
var Html_tel = getId ("html_" + str);

var mobile = getId (' mobile ');

if (Tel.value.length > 0) {
if (!/^[+]{0,1}[0-9]{0,4}[-]{0,1}[0-9]{3,6}[-]{0,1}[0-9]{7,9}$/.exec (Tel.value)) {
html_tel.innerhtml = "<b> phone number format is not normal, please re-enter </b>";
return false;
}
else {
html_tel.innerhtml = "<b>√</b>";
}
}
else if (Mobile.value = = ' && Tel.value = = ')
{
html_tel.innerhtml = "<b> mobile phone and landline must fill in a, format for:0731-84168716</b>";
}
else {
html_tel.innerhtml = "mobile phone and landline must fill in one, the format is: 0731-84168716";
}
}

Detect QQ
function Checkqq (str)
{
var QQ = getId (str);
var html_qq = getId ("html_" + str);

if (Qq.value.length > 0)
{
if (!/^[0-9]{4,15}$/.exec (Qq.value))
{
html_qq.innerhtml = "<B>QQ number is wrong!" </b> ";
return false;
}
Else
{
html_qq.innerhtml = "<b>√</b>";
}
}
Else
{
html_qq.innerhtml = "Easy for customers to contact you directly online";
}
}


OK, we just need to put this file in the HTML and we can verify it.

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.