JS的form表单提交

来源:互联网 发布:苹果手机电池修复软件 编辑:程序博客网 时间:2024/03/29 00:28


<!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="" onsubmit="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.onload=function (){
   //获取文本元素
    var context=document.getElementsByClassName("content");
    for(var i=0;i<context.length;i++){
        //当前元素失去焦点
         context[i].onblur=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].onfocus=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;
   }
}

原创粉丝点击