This is one of my example, copy paste to three files can be executed correctly.
The following are index.css Code:
====================
*{
padding: 0;
margin: 0;
font-size: 18px;
font-family: "黑体";
}
body{
background: #eee;
}
.container{
width: 960px;
background: #fff;
border-radius: 10px;
margin: 100px auto;
}
.container > .header {
text-align: center;
background: #77f;
color: #eee;
height: 45px;
line-height: 45px;
border-radius: 10px 10px 0 0;
}
.container > .body >.content{
height: 93px;
}
.container > .body >.content > .row{
margin-left: 100px;
margin-top: 20px;
position: relative;
}
.container > .body >.content > .row+p{
margin-top: 9px;
margin-bottom: 20px;
margin-left: 157px;
color: #090;
}
.container > .body >.content > .row > input,#sex1 {
position: absolute;
left: 150px;
top: -2px;
width: 500px;
}
.container > .body >.content > .row > #sex1 {
display: inline-block;
height: 30px;
width: 505px;
text-indent: 220px;
}
.container > .body >.content > .row > span{
position: absolute;
left: 55px;
top: 0px;
}
.container > .body >.content > .row:before{
content: "*";
font-size: 20px;
position: relative;
left: 43px;
top: 0px;
color: #093;
}
.container > .body > .btnContainer{
text-align: center;
}
.container > .body > .btnContainer > #btn{
margin: 30px auto;
width: 200px;
height: 50px;
border-radius: 10px;
}
====================
The following are index.js Code:
====================
var userName = getById ( "userName" ), // username
alertText = getById ( 'body') . getElementsByTagName ( "p"), // message box
password = getById ( "password") , // password
checkedPassword = getById ( "checkedPassword"), // confirm password
nameone = getById ( "nameone") , // name
identify = getById ( "identify") , // ID
btn = getById ( "btn") , // get the button
inputs = document.getElementsByTagName ( 'input'), // get all the input tags
alertTexts = document.querySelectorAll, // get all of the message ( "alertText.")
pattern; // regular expression
// Get the specified object id
function getById (id) {
return document.getElementById (id);
}
// hide all information presentation
function hideAlertText () {
for (var I = 0; I <alertText.length; I ++) {
alertText [I] .innerHTML = "";
}
}
// event all the focused input boxes, prompts information
function ojbFocus (ARR, of arr1) {
for (var I = 0; I <arr.length; I ++) {
ARR [I] .onfocus = function () {
// the console.log (of arr1 [this.getAttribute ( "I")]);
of arr1 [this.getAttribute ( "I")] = this.getAttribute the innerHTML ( "alertText");.
}
}
}
// trigger all input box loses focus event, and verify correct
function userNameBlur (ARR, of arr1) {
for (var I = 0; I <arr.length; I ++) {
ARR [I] .onblur = function () {
IF (this.value!) {
of arr1 [this.getAttribute ( "I")] = the innerHTML "is not empty, the input content";.
. of arr1 [this.getAttribute ( "I")] style.color = "Red ";
return;
}
var param = this.getAttribute (" PATT ");
var = new new pattern the RegExp (param);
IF (this.getAttribute (" I ") ===" 2 ") {
IF (this.value! ARR == [. 1] .Value) {
of arr1 [2] = .innerHTML "password twice not match, please re-enter";
of arr1 [2] .style.color = "Red";
return;
}
}
IF (pattern. Exec (this.value)) {
of arr1 [this.getAttribute ( "I")].innerHTML = "right format";
arr1[this.getAttribute("i")].style.color="green";
}else{
arr1[this.getAttribute("i")].innerHTML=this.placeholder;
arr1[this.getAttribute("i")].style.color="red";
}
}
}
}
Submit function () {
btn.onclick = function () {
for (var I = 0; I <inputs.length; I ++) {
IF {(Inputs [I] .Value!)
Inputs [I] .focus ();
alertTexts [I] = .innertHTML Inputs [I] .placeholder;
alertTexts [I] .style.color = "Red";
return;
}
}
for (var I = 0; I <alertTexts.length; I ++) {
IF (alertTexts [ i] .style.color === "Red") {
the Inputs [i] .focus ();
Alert ( "incomplete information can not be registered!");
return;
}
}
Alert ( "registered successfully");
}
}
// hide all of the information prompts
hideAlertText ()
// All input box receives focus events prompted to enter information
ojbFocus (inputs, alertTexts);
pattern = var / ^ \ {W} $ 6.18 /;
userNameBlur (Inputs, alertTexts);
// to submit information, is incomplete
Submit ();
====================
The following is the HTML code:
====================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/index.css">
</head>
<body>
<div class="container">
<div class="header">—— —— 用户注册 —— ——</div>
<hr/>
<div class="body" id="body">
<div class="content">
<div class="row" id="row">
<span>用户名：</span>
<input id="userName" patt="^\w{10,18}$" alertText="请输入10-18位：字母，数字，下划线" type="text" i="0"placeholder = "format is wrong, enter the name 10-18 users: English, numbers, underscores"> <div class = "Row"><div class = "Content"><HR /></ div><the p-class = "alertText" the above mentioned id = "USERNAME1"> 1111 </ the p->
</ div>
<span> Password: </ span>
<INPUT ID = "password" PATT = "^ \ W {6,16} $" alertText = "Please enter the password 6-16 (including: letters, numbers, underline)" type = "password" i = " 1" placeholder = " wrong format, 6-16 enter the password (including: letters, numbers, underline)">
</ div>
<P class = "alertText" ID = "password1" > 1111 </ P>
</ div>
<HR />
<div class = "Content">
<div class = "Row">
<span> confirm password: </ span>
<INPUT ID = "checkedPassword" ID = " checkedPsd "patt =" ^ \ w {6,16} $ "alertText =" Please enter the password 6-16 (including: letters, numbers, underline) "type =" password "i =" 2 "placeholder =" wrong format Please enter 6-16 digit password (including: letters, numbers, underscores) ">
</ div>
<p class="alertText" id="checkedPassword1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>姓名：</span>
<input id="nameone" patt="^[\u4e00-\u9fa5]{2,4}$" alertText="请输入2-4个汉字的姓名" type="text" i="3" placeholder="格式不对，请输入2-4个汉字的姓名">
</div>
<p class="alertText" id="nameone1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>性别：</span>
<select id="sex1" id="sex" name="sex">
<option value="man">男</option>
<option value="woman">女</option>
</select>
</div>
<!-- <p class="alertText" id="">1111</p> -->
</div>
<hr/>
<div class="content">
<div class="row">
<span>身份证：</span>
<input id = "identify" patt = "^ [1-9] [0-9] {16} [0-9X] $" alertText = " Please enter identification number 18" type = "text" i = "4" placeholder = "format does not enter identification number 18">
</ div>
<P class = "alertText" ID = "identify1"> 1111 </ P>
</ div>
<HR />
<div class = "Content">
<div class = "Row">
<span> email address: </ span>
<INPUT ID = "In email" PATT = "^ \ W * @ \ W * \ [A-zA-the Z. ] {2,5} "alertText =" Please enter the mailbox format such as: [email protected] "type =" text " i =" 5 "placeholder =" wrong format, email format must be [email protected] ">
< / div>
<P class = "alertText" ID = "EMAIL1"> 1111 </ P>
</ div>
<HR />
<div class = "Content">
<div class = "Row">
<span> phone number: </ span>
<INPUT ID = "Phone" PATT = "^ [. 1] [356 789] [0- 9] {9} $ "alertText =" Please re-enter the phone number 11 "type =" text "i = " 6 "placeholder =" wrong format, enter 11-digit phone number ">
</div>
<p class="alertText" id="phone1">1111</p>
</div>
<hr/>
<div class="btnContainer">
<button id="btn">注 册</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
====================