练习-文本输入提示特效

实现了画面的的效果,具体的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>

练习-文本输入提示特效

猜你喜欢