这是我的一个实例,复制黏贴到三个文件中即可正确执行。
以下是index.css代码：
====================
*{
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;
}
====================
以下是index.js代码：
====================
var userName=getById("userName"),//用户名
alertText=getById('body').getElementsByTagName("p"),//信息提示框
password=getById("password"),//密码
checkedPassword=getById("checkedPassword"),//确认密码
nameone=getById("nameone"),//姓名
identify=getById("identify"),//身份证
btn=getById("btn"),//获取按钮
inputs=document.getElementsByTagName('input'),//获得所有的input标签
alertTexts=document.querySelectorAll(".alertText"),//获取所有的提示信息
pattern;//正则表达式
//获取id指定的对象
function getById(id){
return document.getElementById(id);
}
//隐藏所有信息提示
function hideAlertText(){
for (var i = 0; i < alertText.length; i++) {
alertText[i].innerHTML="";
}
}
//所有输入框获得焦点的事件，提示输入信息
function ojbFocus(arr,arr1){
for (var i = 0; i < arr.length; i++) {
arr[i].onfocus=function(){
// console.log(arr1[this.getAttribute("i")]);
arr1[this.getAttribute("i")].innerHTML=this.getAttribute("alertText");
}
}
}
//所有输入框失去焦点时触发事件，并验证是否正确
function userNameBlur(arr,arr1){
for (var i = 0; i < arr.length; i++) {
arr[i].onblur=function(){
if (!this.value) {
arr1[this.getAttribute("i")].innerHTML="不能为空，请输入内容";
arr1[this.getAttribute("i")].style.color="red";
return;
}
var param=this.getAttribute("patt");
var pattern=new RegExp(param);
if (this.getAttribute("i")==="2") {
if(this.value!==arr[1].value){
arr1[2].innerHTML="两次密码输入不一致，请重新输入";
arr1[2].style.color="red";
return;
}
}
if (pattern.exec(this.value)) {
arr1[this.getAttribute("i")].innerHTML="格式正确";
arr1[this.getAttribute("i")].style.color="green";
}else{
arr1[this.getAttribute("i")].innerHTML=this.placeholder;
arr1[this.getAttribute("i")].style.color="red";
}
}
}
}
function submit(){
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") {
inputs[i].focus();
alert("信息填写不完整，无法注册！");
return;
}
}
alert("注册成功");
}
}
//隐藏所有信息提示
hideAlertText()
//所有输入框获得焦点事件，提示输入信息
ojbFocus(inputs,alertTexts);
var pattern=/^\w{6.18}$/;
userNameBlur(inputs,alertTexts);
//提交信息，信息不完整
submit();
====================
以下是HTML代码：
====================
<!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" ></script>
</body>
</html>
====================