表单验证1 

<!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 email = $("email").value;
           var password = $("password").value;
           var repassword = $("repassword").value;
           var name = $("name").value;
           var phone = $("phone").value;

           $("emailinfo").innerHTML = "";
           $("passwordinfo").innerHTML = "";
           $("repasswordinfo").innerHTML = "";
           $("nameinfo").innerHTML = "";
           $("phoneinfo").innerHTML = "";

           //邮箱验证
           if(email == "") {
              $("emailinfo").innerHTML = "Email值不能为空";
               return false;
           }
           if(email.search(/^/\D/g/) == -1) {
               $("emailinfo").innerHTML = "邮箱格式不正确";
               return false;
           }

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

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

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

           //手机号验证
           if(phone == ""){
                  $("phoneinfo").innerHTML = "手机号不能为空";
               return false;
           }
           if (phone.search(/^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/) == -1){
                  $("phoneinfo").innerHTML = "手机号格式错误";
               return false;
           }
       }
    </script>
    </head>
    <body>
      <form name="login_form" method="post">
          <div>
               Email:<input type="text" name="email" id="email"/>
               <span id="emailinfo"></span>
          </div>
          <div>
                          密码:<input type="password" name="password" id="password"/>
               <span id="passwordinfo"></span>
          </div>
          <div>
                          重输密码:<input type="password" name="repassword" id="repassword"/>
               <span id="repasswordinfo"></span>
          </div>
          <div>
                           姓名：<input type="text" name="name" id="name"/>
                <span id="nameinfo"></span>
          </div>
          <div>
                           手机号：<input type="text" name="phone" id="phone"/>
                <span id="phoneinfo"></span>
          </div>
          <div>
              <button type="button" onclick="return check()"/>注册</button>
          </div>
      </form>
    </body>
</html>

 

posted @ 2016-07-12 13:51  小蛋壳12  阅读(133)  评论(0)    收藏  举报