HTML form Validation

Last Update:2015-09-12 Source: Internet

Author: User

Tags email account

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script>
Global variables
function Clearerr (Eleid) {
document.getElementById (Eleid). style.display= "None";
}
var code; Defining the verification code globally
User name Verification
function UserName () {
var reg=/^[a-z| a-z][a-z| a-z|0-9|_]{5,19}$/;
var Txtval=document.getelementbyid ("text"). Value;
if (Reg.test (txtval)) {
Clearerr ("Usernameck");
return true;
}
else{
document.getElementById ("Usernameck"). style.display= "";
document.getElementById ("Usernameck"). Innerhtml= "<font color= ' red ' > Input illegal </font>";
return false;
}

}

Password verification
function Passname () {
var reg=/^[a-z| a-z|0-9|_]{5,19}$/;
var Txtval2=document.getelementbyid ("Text2"). Value;
if (Reg.test (TXTVA2)) {
Clear ("Usernameps");
return true;
}
else{
document.getElementById ("Usernameps"). style.display= "";
document.getElementById ("Usernameps"). Innerhtml= "<font color= ' red ' > Input illegal </font>";
return false;
}
function Clear (Yeid) {
document.getElementById (Yeid). style.display= "None";
}
}
Verifying Password validation
function Pass2name () {
var Txtval3=document.getelementbyid ("Text3"). Value;
var Txtval2=document.getelementbyid ("Text2"). Value;
if (TXTVAL2==TXTVAL3) {
CLEAR2 ("UserNamePs2");
return true;
}
else {
document.getElementById ("UserNamePs2"). style.display= "";
document.getElementById ("UserNamePs2"). Innerhtml= "<font color= ' Red ' > Before and after password mismatch </font>";
return false;
}

function Clear2 (aaid) {
document.getElementById (aaid). style.display= "None";
}

}
Mailbox Verification
function Emailtext () {
var reg=/^[a-z| A-z|0-9][email protected] ([a-z|a-z|0-9]) +\.com|net|edu|cn$/;
var Txtval4=document.getelementbyid ("Text5"). Value;
if (Reg.test (TXTVAL4)) {
EMAILTEXT2 ("em");
return true;
}
else{
document.getElementById ("em"). style.display= "";
document.getElementById ("em"). Innerhtml= "<font color= ' red ' > Input illegal </font>";
return false;
}

}
function EmailText2 (e) {
document.getElementById (E). style.display= "None";

}
Verification Code Verification
function Createcode ()
{
Code = "";
var codelength = length of 4;//verification code
var checkcode = document.getElementById ("Checkcode");
var Selectchar = new Array (0,1,2,3,4,5,6,7,8,9, ' A ', ' B ', ' C ', ' d ', ' e ', ' f ', ' g ', ' h ', ' I ', ' j ', ' K ', ' L ', ' M ', ' N ', ' O ', ' P ', ' Q ') , ' R ', ' S ', ' T ', ' U ', ' V ', ' W ', ' X ', ' Y ', ' Z ');

for (Var i=0;i<codelength;i++)
{

var charIndex = Math.floor (Math.random () *14);
Code +=selectchar[charindex];

}
Alert (code);
if (Checkcode)
{
Checkcode.classname= "Code";
Checkcode.value = code;
}

}

function Validate ()
{
var inputcode = document.getElementById ("INPUT1"). Value;
if (Inputcode.length <=0)
{
Alert ("Please enter the verification code!) ");
}
else if (inputcode! = code)
{
Alert ("Verification code input Error! ");
Createcode ();//Refresh Verification Code
}
Else
{
Alert ("input correct");
}

}
Submit Form Validation
function Submitvalidator () {
if ((document.getElementById ("text"). value== "") | | (document.getElementById ("Text2"). value== "") | | (document.getElementById ("Text3"). value== "") | | (Document.getelementbyname ("Radio"). value== "") | | (document.getElementById ("Text5"). value== "") | | (document.getElementById ("Text5"). value== "") | | (document.getElementById ("input1"). value== "" | | (document.getElementById ("a"). value== "")))
{
Alert ("Required fields cannot be empty!") ");
return false;
}
else{
Alert ("Submit success");
}

}

</script>
<style type= "Text/css" >
. css1 {
Color: #999;
}
#form11 {
Color: #F00;
}

. Code
{
font-family:arial;
Font-style:italic;
color:red;
border:0;
PADDING:2PX 3px;
letter-spacing:3px;
Font-weight:bolder;
}. Unchanged
{
border:0;
}

</style>

<body >
<form action= "http://www.baidu.com" method= "POST" >
<table width= "835" border= "0" >
<tr>
&LT;TD colspan= "4" align= "center" bgcolor= "#6699CC" &GT;HP-EPM XX company user Registration </td>
</tr>
<tr>
&LT;TD height= "1" colspan= "4" bgcolor= "#6699CC" ></td>
</tr>
<tr>
&LT;TD width= "134" align= "right" > User name:</td>
&LT;TD width= "302" >

<input type= "text" name= "text" id= "text" onblur= "UserName ()" onfocus= "Clearerr (' Usernameck ');" />
</td>
&LT;TD width= "153" ><div id= "Usernameck" style= "D" > </div></td>
&LT;TD width= "228" class= "CSS1" > English letter Arabic numerals underline combination, length is 6~20 bit, can only start with letters </td>
</tr>
<tr>
&LT;TD align= "Right" > enter password:</td>
<td>

<input type= "Password" name= "Text2" id= "Text2" onblur= "Passname ()" onfocus= "Clear (' usernameps ')"/>
</td>
<td><div id= "Usernameps" > </div></td>
&LT;TD rowspan= "2" class= "Css1" > English alphabet Arabic numerals underline combination, length 6~20 bit </td>
</tr>
<tr>
&LT;TD height= "PNs" align= "right" > Verify password:</td>
<td>

<input type= "Password" name= "Text3" id= "Text3" onblur= "Pass2name ()" onfocus= "Clearerr (' userNamePs2 ')"/>
</td>
<td><div id= "UserNamePs2" ></div></td>
</tr>
<tr>
&LT;TD height= "1" colspan= "4" bgcolor= "#6699cc" ></td>
</tr>
<tr>
&LT;TD align= "Right" > password hint question:</td>
<td>

<select name= "chose" id= "chose" >
<option value= "1" > Your first lover is?</option>
<option value= "2" > Your QQ number password is?</option>
<option value= "3" > where is your hometown?</option>

</select>
</td>
<td> </td>
&LT;TD class= "Css1" > </td>
</tr>
<tr>
&LT;TD align= "Right" > Password prompt answer:</td>
<td>

<input type= "text" name= "Text4" id= "textpssnew" onblur= "pssnew ()"/>
</td>
<td> </td>
&LT;TD class= "Css1" > When you forget the password, you can query by password question and answer, password prompt answer 3~32 between the bits, cannot contain special characters </td>
</tr>
<tr>
&LT;TD height= "1" colspan= "4" bgcolor= "#6699CC" ></td>
</tr>
<tr>
&LT;TD align= "Right" > Date of birth:</td>
<td>

<select name= "Chose2" id= "Chose2" >
<option value= "1" >1991</option>
<option value= "2" >1992</option>

</select>
Years

<select name= "Chose3" id= "CHOSE3" >
<option value= "1" >1</option>
<option value= "2" >2</option>
</select>
Month

<select name= "Chose4" id= "Chose4" >
<option value= "1" >1</option>
<option value= "2" >2</option>
</select>
Day
</td>
<td> </td>
&LT;TD class= "Css1" > </td>
</tr>
<tr>
&LT;TD align= "Right" > Gender:</td>
<td>
<input type= "Radio" name= "Radio" id= "Radio" value= "Radio"/>

Man
<input type= "Radio" name= "Radio" id= "Radio" value= "Radio"/> Female
</td>
<td> </td>
&LT;TD class= "Css1" > to facilitate your use, please fill in the real information </td>
</tr>
<tr>
&LT;TD align= "Right" > Common mailbox:</td>
<td>

<input type= "text" name= "Text5" id= "Text5" onblur= "Emailtext ()" onfocus= "clearerr (' em ')"/>
</td>
<td><div id= "em" ></div></td>
&LT;TD class= "Css1" > Easy access to important information related to your email account, including password recovery </td>
</tr>
<tr>
&LT;TD colspan= "4" bgcolor= "#6699CC" height= "1" ></td>
</tr>
<tr>
&LT;TD align= "Right" > Please enter the verification code:</td>
<td>

 <input type= "text" onclick= "Createcode ()" id= "Input1"/>

<input type= "text" id= "Checkcode" class= "unchanged" style= "width:80px"/><br/>
<input id= "Button1" onclick= "Validate ();" type= "button" value= "OK"/> 

</td>
<td> </td>
<td> </td>
</tr>
<tr>
<TD colspan= "4" bgcolor= "#6699CC" height= "1" ></td>
</tr>
<tr>
<td> </td>
<td>
<input type= "checkbox" Name= "a" id= "a"/>
I have read and accepted <a href= "t2t3 supplement exercise. docx" > Terms of Service </a>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<TD colspan= "4" align= "Center" >
<input type= "Submit" Name= "Radio2" id= "Radio2" value= "Submit" onclick= "Submitvalidator ()"/>
</td>
</tr>
<tr>
<TD height= "1" colspan= "4" bgcolor= "#6699CC" ></td>
</tr>
</table>
</form>
</body>

HTML form Validation

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More