<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="formjs.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.block{
width: 420px;
margin: 0 auto;
padding-left: 40px;
border: 1px dashed silver;
}
li{
position: relative;
list-style: none;
line-height: 45px;
}
li label{
display: inline-block;
width: 90px;
text-align: right;
color: #3091ff;
font-weight: bold;
}
li input[type="text"]{
width: 200px;
height: 30px;
outline: none;
border-radius: 5px;
border: 1px solid silver;
font-size: 18px;
}
li input[type="submit"]{
width: 60px;
margin-left: 110px;
height: 25px;
}
li input[type="reset"]{
width: 60px;
height: 25px;
}
.error{
position: absolute;
display: none;
white-space: nowrap;
font-size: small;
color: red;
}
</style>
</head>
<body>
<div class="block">
<!--action="" 表单提交的路径-->
<form action="" οnsubmit="return subtxt()">
<ul>
<li>
<label for="nickname">昵称:</label>
<input type="text" class="content" name="nickname"/>
<span class="error">*昵称不能为空!</span>
</li>
<li>
<label for="name">姓名:</label>
<input type="text" class="content" name="name"/>
<span class="error">*姓名不能为空!</span>
</li>
<li>
<label for="idcard">证件号:</label>
<input type="text" class="content" name="idcard"/>
<span class="error">*证件号不能为空!</span>
</li>
<li>
<label for="age">年龄:</label>
<input type="text" class="content" name="age"/>
<span class="error">*年龄不能为空!</span>
</li>
<li>
<label for="sex">性别:</label>
<input type="radio" checked name="sex"/>男<input type="radio" name="sex"/>女
</li>
<li>
<label for="pwd">密码:</label>
<input type="text" class="content" name="pwd"/>
<span class="error">*密码不能为空!</span>
</li>
<li>
<label for="pwdnew">确认密码:</label>
<input type="text" class="content" name="pwdnew"/>
<span class="error">*密码不能为空!</span>
</li>
<li>
<label for="address">地址:</label>
<input type="text" class="content" name="address"/>
<span class="error">*地址不能为空!</span>
</li>
<li>
<input type="submit" value="注册" class="subinfo"/>
<input type="reset" value="重置"/>
</li>
</ul>
</form>
</div>
</body>
</html>
var arr=[];
window.οnlοad=function (){
//获取文本元素
var context=document.getElementsByClassName("content");
for(var i=0;i<context.length;i++){
//当前元素失去焦点
context[i].οnblur=function (){
/*this.name 为当前的元素名称*/
if(this.name=="nickname")
{
//如果文本值为空 则显示提示信息
if(this.value=="")
{
document.getElementsByClassName("error")[0].style.display="inline-block";
this.style.borderColor="red";
arr[0]=false;
}
else{
arr[0]=true;
}
}
else if(this.name=="name")
{
if(this.value=="")
{
document.getElementsByClassName("error")[1].style.display="inline-block";
this.style.borderColor="red";
arr[1]=false;
}
else
{
arr[1]=true;
}
}
else if(this.name=="idcard")
{
if(this.value==""){
document.getElementsByClassName("error")[2].style.display="inline-block";
document.getElementsByClassName("error")[2].innerHTML="*证件号不能为空!"
this.style.borderColor="red";
arr[2]=false;
}
else
{
if(this.value.length!=18)
{
document.getElementsByClassName("error")[2].style.display="inline-block";
document.getElementsByClassName("error")[2].innerHTML="*证件号长度为18位!";
this.style.borderColor="red";
arr[2]=false;
}
else{
//取最后一位
var txt=this.value.substr(17,1);
if(isNaN(txt))
{
if(txt.toLowerCase()!="x")
{
document.getElementsByClassName("error")[2].style.display="inline-block";
document.getElementsByClassName("error")[2].innerHTML="*证件号格式不正确!";
this.style.borderColor="red";
arr[2]=false;
}
else
{
arr[2]=true;
}
}
else{
arr[2]=true;
}
}
}
}
else if(this.name=="age")
{
if(this.value=="")
{
document.getElementsByClassName("error")[3].style.display="inline-block";
document.getElementsByClassName("error")[3].innerHTML="*年龄不能为空!";
this.style.borderColor="red";
arr[3]=false;
}
else
{
if(isNaN(this.value))
{
document.getElementsByClassName("error")[3].style.display="inline-block";
document.getElementsByClassName("error")[3].innerHTML="*年龄格式不正确!";
this.style.borderColor="red";
arr[3]=false;
}
else
{
if(this.value<0||this.value>100)
{
document.getElementsByClassName("error")[3].style.display="inline-block";
document.getElementsByClassName("error")[3].innerHTML="*年龄不符合要求!";
this.style.borderColor="red";
arr[3]=false;
}
else
{
arr[3]=true;
}
}
}
}
else if(this.name=="pwd")
{
if(this.value=="")
{
document.getElementsByClassName("error")[4].style.display="inline-block";
document.getElementsByClassName("error")[4].innerHTML="*密码不能为空!";
this.style.borderColor="red";
arr[4]=false;
}
else
{
if(this.value.length<5||this.length>10)
{
document.getElementsByClassName("error")[4].style.display="inline-block";
document.getElementsByClassName("error")[4].innerHTML="*密码长度为5-10位!";
this.style.borderColor="red";
arr[4]=false;
}
else
{
//判断密码的要求格式
arr[4]=true;
}
}
}
else if(this.name=="pwdnew")
{
if(this.value=="")
{
document.getElementsByClassName("error")[5].style.display="inline-block";
document.getElementsByClassName("error")[5].innerHTML="*密码不能为空!";
this.style.borderColor="red";
arr[5]=false;
}
else
{
if(this.value.length<5||this.length>10)
{
document.getElementsByClassName("error")[5].style.display="inline-block";
document.getElementsByClassName("error")[5].innerHTML="*密码长度为5-10位!";
this.style.borderColor="red";
arr[5]=false;
}
else
{
//判断两次密码是否相等
var pwd=document.getElementsByClassName("content")[4].value;
if(this.value!=pwd)
{
document.getElementsByClassName("error")[5].style.display="inline-block";
document.getElementsByClassName("error")[5].innerHTML="*两次密码不一致!";
this.style.borderColor="red";
arr[5]=false;
}
else
{
arr[5]=true;
}
}
}
}
else{
if(this.value=="")
{
document.getElementsByClassName("error")[6].style.display="inline-block";
document.getElementsByClassName("error")[6].innerHTML="*地址不能为空!";
this.style.borderColor="red";
arr[6]=false;
}
else
{
arr[6]=true;
}
}
}
//当前元素获得焦点 显示相反的造型
context[i].οnfοcus=function (){
if(this.name=="nickname"){
document.getElementsByClassName("error")[0].style.display="none";
}
else if(this.name=="name")
{
document.getElementsByClassName("error")[1].style.display="none";
}
else if(this.name=="idcard")
{
document.getElementsByClassName("error")[2].style.display="none";
}
else if(this.name=="age")
{
document.getElementsByClassName("error")[3].style.display="none";
}
else if(this.name=="pwd")
{
document.getElementsByClassName("error")[4].style.display="none";
}
else if(this.name=="pwdnew")
{
document.getElementsByClassName("error")[5].style.display="none";
}
else{
document.getElementsByClassName("error")[6].style.display="none";
}
this.style.borderColor="silver";
}
}
}
function subtxt(){
//检查数组里面的值
if(arr.length!=0&&arr.length==7)
{
for(var i=0;i<arr.length;i++)
{
if(arr[i]==false)
{
return false;
}
}
return true;
}
else{
return false;
}
}