表单验证2

最新推荐文章于 2024-07-16 16:43:05 发布

diansansan1077

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hdd1223/p/5663276.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <title>表单验证</title>
    <script type="text/javascript">
       function $(id) {
           return document.getElementById(id);
       }

       function check() {
           var name = $("name").value;
           var phone = $("phone").value;
           var password = $("password").value;
           var repassword = $("repassword").value;

           $("errorinfo").innerHTML = "";

           //姓名验证
           if(name == "") {
              $("errorinfo").innerHTML = "姓名不能为空";
               return false;
           }
           if (name.search(/^(?=.*\d.*\b)/) != -1){
                  $("errorinfo").innerHTML = "姓名不能有数字";
               return false;
           }

           //手机号验证
           if(phone == ""){
                  $("errorinfo").innerHTML = "手机号不能为空";
               return false;
           }
           if (phone.search(/^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/) == -1){
                  $("errorinfo").innerHTML = "手机号格式错误";
               return false;
           }

           //密码验证
           if(password == ""){
                  $("errorinfo").innerHTML = "密码不能为空";
               return false;
           }
           if(password.length < 5) {
               $("errorinfo").innerHTML = "密码长度必须大于或者等于5";
               return false;
           }

           //确认密码验证
           if(repassword != password) {
               $("errorinfo").innerHTML = "两次输入的密码不一致";
               return false;
           }
       }

       function btn() {
            var inputs = document.getElementsByTagName("button");    //取出名字为button的值
            for (var i =0; i < inputs.length; i++) {            //遍历
                var button = inputs[i];
                button.onclick = btnclick;                    //当某个按钮被点击时调用btnclick函数
            }
        }
        function btnclick() {
            var inputs = document.getElementsByTagName("button");    //取出button的值
            for (var i =0; i < inputs.length; i++) {
                var button = inputs[i];                        //遍历
                if (button == window.event.srcElement) {            //如果被点击
                    button.style.color="red";
                }
                else {
                    button.style.color="black";
                }
            }
        }
    </script>
    </head>
    <body>
      <form name="login_form" method="post" onsubmit="return check()" action="new.html">
          <div>
                           姓名：<input type="text" name="name" id="name"/>
          </div>
          <div>
                           手机号：<input type="text" name="phone" id="phone"/>
          </div>
          <div>
                     密码：<input type="password" name="password" id="password" />
          </div>
          <div>
                     确认密码：<input type="password" name="repassword" id="repassword" />
          </div>
          <div>
              <span id="errorinfo"></span>
          </div>

          <div>
              <button type="submit"/>注册</button>
          </div>
      </form>
    </body>
</html>