<! 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=gb2312" >
<title> Registration Interface </title>
<style type= "Text/css" >
body{margin:0px;padding:0px;}
. zc{
width:380px;
height:600px;
margin:0 Auto;
line-height:40px;
}
. main{
font-size:20px;
border:1px solid #000;
padding:10px;
Background-color: #FFC;
}
. top{
font-size:30px;
Font-weight:bold;
Color:blue;
Text-align:center;
}
</style>
<body>
<div class= "ZC" >
<div>
<p class= "Top" > User registration </p>
</div>
<div class= "Main" >
<form action= "" method= "Get" onsubmit= "return Checkform ()" >
Account Number: <input type= "text" id= "userid" name= "userid" value= ""/>
<div id= "Point1" style= "display:inline; Color: #0CF; " ></div><br/>
Secret Code: <input type= "password" id= "USERPW" name= "USERPW" value= ""/>
<div id= "Point2" style= "display:inline; Color: #0CF; " ></div><br/>
Confirm Password: <input type= "password" id= "userPw1" name= "USERPW1" value= ""/>
<div id= "Point3" style= "display:inline; Color: #0CF; " ></div><br/>
Surname Name: <input type= "test" id= "name" name= "name" value= ""/>
<div id= "Point4" style= "display:inline; Color: #0CF; " ></div><br/>
Sex Do not: <input type= "Radio" name= "Sex" value= "checked=" checked "/> Male
<input type= "Radio" name= "Sex" value= "/> Female <br/>
Year Aged: <input type= "Test" id= "Age" name= "ages" value= ""/>
<div id= "point5" style= "display:inline; Color: #0CF; " ></div><br/>
Email: <input type= "test" id= "email" name= "email" value= "/>
<div id= "Point6" style= "display:inline; Color: #0CF; " ></div><br/>
Fixed phone: <input type= "Test" id= "Tel" name= "tel" value= ""/>
<div id= "point7" style= "display:inline; Color: #0CF; " ></div><br/>
Mobile: <input type= "test" id= "phone" name= "phone" value= ""/>
<div id= "Point8" style= "display:inline; Color: #0CF; " ></div><br/>
<input type= "Submit" value= "registration" style= "color: #F08080; width:150px;height:50px;font-size:30px;position:relative; top:10px;left:100px; "/>
</form>
</div>
</div>
<script language= "JavaScript" >
function Checkform () {
var Id=document.getelementbyid ("UserId"). value;//Get Value
var Mm=document.getelementbyid ("USERPW"). Value;
var Mm1=document.getelementbyid ("UserPw1"). Value;
var Name=document.getelementbyid ("name"). Value;
var Age=document.getelementbyid ("Age"). Value;
var Email=document.getelementbyid ("email"). Value;
var Tel=document.getelementbyid ("Tel"). Value;
var Phone=document.getelementbyid ("Phone"). Value;
var Point1=document.getelementbyid ("Point1"); Gets a pointer to
var Point2=document.getelementbyid ("Point2");
var Point3=document.getelementbyid ("Point3");
var Point4=document.getelementbyid ("Point4");
var Point5=document.getelementbyid ("Point5");
var Point6=document.getelementbyid ("Point6");
var Point7=document.getelementbyid ("point7");
var Point8=document.getelementbyid ("Point8");
var idreg=/^[a-za-z]{1} (\w) {7,15}$/;//Regular expression rule
var mmreg=/^ (\w) {8,16}$/;
var namereg=/^ (\w) {4,10}$/;
var agereg=/^[1-9]{1}[0-9]{0,1}$/;
var emailreg=/^[\w]+ (\.[ \w]+) *@[\w]+ (\.[ \w]+) +$/;
var telreg=/^[+]{0,1} (\d) {1,3}[]? ([-]? ((\d) | []) {1,12}) +$/;
var phonereg=/^[1]{1}[0-9]{10}$/;
if (!idreg.test (ID)) {//idreg.test (ID) verifies whether the value satisfies the rule, satisfies the return true, and does not satisfy the return false.
Alert ("Please enter a 8-16-digit account that starts with a letter and consists of letters, numbers, and underscores");
return false;
}
Point1.innerhtml= "input is correct"; Prompt appears in the back
if (!mmreg.test (mm)) {
Alert ("Please enter a 8-16-digit password consisting of letters, numbers and underscores");
return false;
}
Point2.innerhtml= "input is correct";
if (MM!=MM1) {
Alert ("Two input is incorrect");
return false;
}
Point3.innerhtml= "input is correct";
if (!namereg.test (name)) {
Alert ("Please enter a 4-10-digit name consisting of letters, numbers and underscores");
return false;
}
Point4.innerhtml= "input is correct";
if (!agereg.test (age)) {
Alert ("Please enter the correct number");
return false;
}
Point5.innerhtml= "input is correct";
if (!emailreg.test (email)) {
Alert ("Please enter the correct email address");
return false;
}
Point6.innerhtml= "input is correct";
if (!telreg.test (tel)) {
Alert ("Please enter the correct phone number");
return false;
}
Point7.innerhtml= "input is correct";
if (!phonereg.test (phone)) {
Alert ("Please enter the correct mobile number");
return false;
}
Point8.innerhtml= "input is correct";
return true;
}
</script>
</body>
Implementing form validation using JavaScript and regular expressions (Css,js exercise)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
