表单验证

来源：互联网发布：java oop是什么意思编辑：程序博客网时间：2024/06/04 01:16

<!doctype html>
<html>
   <head>
       <title>表单验证</title>

       <style type="text/css">
           *{
               font-size:30px;
           }
           input{
               border:1px solid red;
           }
       </style>
       <script type="text/javascript">
           function checkReset (){
               return confirm("你确定重写表单信息吗?");
           }
           //表单提交时会调用的验证方法
           function checkSubmit (){
               //用户名不能为空
               var name = document.getElementById("name").value;
               if(name=="" || name.length==0){
                   alert("用户名不能为空");
                   return false; //返回
               }/*else{
                   return true;//这个为什么不要写, 因为如果这个写了之后, 用户名满足要求返回true, 表单就提交了, 后面的密码,邮箱就都不会判断了
               }*/
               //密码6-18字符
               var pwd1 = document.getElementById("pwd1").value;
               if(pwd1.length<6 || pwd1.length>18){
                   alert("密码只支持6-18字符");
                   return false;
               }

               //确认密码要和密码一样
               var pwd2 = document.getElementById("pwd2").value;
               if(pwd1!=pwd2){
                   alert("密码不一致");
                   return false;
               }

               //邮箱要有@符号 .符号 @在.的前面
               //邮箱在这里不能很好的写验证, 后面我们用正则表达式来写真正的邮箱验证
               var email = document.getElementById("email").value;
               var a = email.indexOf("@"); //@的下标
               var b = email.indexOf("."); //.的下标
               if(a==-1 || b==-1 || a>b){
                   alert("邮箱格式不正确");
                   return false;
               }
           }
           //服务条款
           function show (){
               var obj = document.getElementById("staus");
               if(obj.checked){ //为true 代表同意了
                   //disabled 为 false 代表取消禁用
                   document.getElementById("subm").disabled = false;
               }else{
                   //disabled 为 false 代表开启禁用
                   document.getElementById("subm").disabled = true;
               }
           }
       </script>
   </head>

   <body>
       <form action="String字符串.html" method="post" onreset="return checkReset()" onsubmit="return checkSubmit()">
           用户名: <input type="text" id="name" /><br />
           密  码: <input type="text" id="pwd1" /><br />
           确认密码: <input type="text" id="pwd2" /><br />
           邮箱地址: <input type="text" id="email" /><br />
           <input type="checkbox" id="staus" onclick="show()">
           我已经同意许可条款<br />
           <input type="submit" value="注册" disabled="disabled" id="subm">
           <input type="reset" value="重写">
       </form>
   </body>
</html>

0 0