实现了画面的的效果,具体的form表达提交没有设置,id属性用的有点多,有没有在简化一点的写法!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function mingz(){
var a=document.getElementById("d1").value;
var b=document.getElementById("c1");
if(a.trim()=="") {
b.innerHTML = "名字不能为空";
b.style.color="red"
}
for(var i=0;i< a.length;i++){
var j= a.substring(i,i+1);
if(j>=0){
b.innerHTML="名字中不能包含数字";
b.style.color="red"
}
}
}
function xings(){
var a=document.getElementById("d2").value;
var b=document.getElementById("c2");
if(a.trim()==""){
b.innerHTML="姓氏不能为空";
b.style.color="red"
}
for(var i=0;i< a.length;i++){
var j= a.substring(i,i+1);
if(j>=0){
b.innerHTML="姓氏中不能包含数字";
b.style.color="red"
}
}
}
function denglum(){
var a=document.getElementById("d3").value;
var b=document.getElementById("c3");
if(a.trim()==""){
b.innerHTML="登录名不能为空";
b.style.color="red"
}
}
function mima(){
var a=/^w{6,21}$/;
var b=document.getElementById("d4").value;
var c=document.getElementById("c4");
var e=a.test(b);
if(e==false){
c.innerHTML="密码必须等于或大于6个字符";
c.style.color="red"
}
}
function xmima(){
var a=document.getElementById("d4").value;
var b=document.getElementById("d5").value;
var c=document.getElementById("c5");
if(a==b){
c.innerHTML="密码不能为空";
c.style.color="red"
}else if(b==""){
c.innerHTML="密码一致";
c.style.color="green"
}else{
c.innerHTML="两次输入密码不一致";
c.style.color="red"
}
}
function youxiang(){
var a=document.getElementById("d6").value;
var b=document.getElementById("c6");
if(a.indexOf("@")==-1|| a.indexOf(".")==-1|| a.trim()==""){
b.innerHTML="Email格式不正确,必须包含'@'和'.'";
b.style.color = "red";
}
}
function kong(mm){
switch (mm){
case 1:
document.getElementById("c1").innerHTML="";
break;
case 2 :
document.getElementById("c2").innerHTML="";
break;
case 3 :
document.getElementById("c3").innerHTML="";
break;
case 4 :
document.getElementById("c4").innerHTML="";
break;
case 5 :
document.getElementById("c5").innerHTML="";
break;
case 6 :
document.getElementById("c6").innerHTML="";
break;
}
}
</script>
</head>
<body>
<form>
<label for="d1">名字:</label>
<input type="text" id="d1" onblur="mingz()" onfocus="kong(1)"><span id="c1"></span><br>
<label for="d2">姓氏:</label>
<input type="text" id="d2" onblur="xings()" onfocus="kong(2)"><span id="c2"></span><br>
<label for="d3">登录名:</label>
<input type="text" id="d3" onblur="denglum()" onfocus="kong(3)"><span id="c3"></span><br>
<label for="d4">密码:</label>
<input type="password" id="d4" onblur="mima()" onfocus="kong(4)"><span id="c4"></span><br>
<label for="d5">再次输入密码:</label>
<input type="password" id="d5" onblur="xmima()" onfocus="kong(5)" onkeyup="xmima()"><span id="c5"></span><br>
<label for="d6">电子邮箱:</label>
<input type="text" id="d6" onblur="youxiang()" onfocus="kong(6)"><span id="c6"></span><br>
</form>
</body>
</html>