验证表单之正则表达式

作者：shiji2018.05.06来源：Web前端之家浏览：14628评论:0

关键词：form 验证 JS

弄了个简单的验证表单之正则表达式，来一起简单学习下咯！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: "微软雅黑";
        }
     .cont{
         width: 530px;
         height: 240px;
         margin: 100px auto;
         border: 1px solid;
     }
        input{
            width: 220px;
            height: 40px;
            margin: 5px;
            vertical-align: center;
        }
        .cont>h1{
            margin:0 auto;
            width: 530px;
            height: 50px;
            text-align: center;
            font-size: 24px;
            line-height: 50px;
        }
        .cont>.sp{
            width: 40px;
            height: 40px;
            display:inline-block;
            background-color:#4F5F6E;

            color: #fff;
            text-align: center;
            line-height:40px;
            margin-left: 120px;
            font-size: 16px;
        }
        .cont>button{
            margin-top: 10px;
            width: 272px;
            height: 42px;
            line-height: 42px;
            background-color: #01C386;
            font-size: 24px;
            margin-left: 120px;
        }
    </style>
</head>
<body>
      <form action="#" method="post">
          <h1>注册考试</h1>
          <span class="sp icon-user"></span>
          <input type="text" name="username" placeholder="请输入账号">
          <span></span>
          <br>
          <span class="sp icon-cog"></span>
          <input type="password" name="psw" placeholder="请输入密码">
          <span></span><br>
          <button>开始注册</button>
      </form>
<script>
var user=document.querySelector(".userName");
var psw=document.querySelector(".Psw");
var nameError=document.querySelector("form>.nameError");
var pswError=document.querySelector("form>.pswError");
var btn=document.querySelector("button");

//检测用户名
function checkName() {
    var uV=user.value;
    var reg=/^[a-zA-Z]{6,12}$/;
  if(reg.test(uV)==true){
    nameError.innerText=" √ 账号可用";
    nameError.style.fontSize="12px";
    nameError.style.color="green";
    return true;
  }else {
      nameError.innerText=" × 账号格式错误,请重试";
      nameError.style.fontSize="12px";
      nameError.style.color="red";
      user.focus(); // 可以让元素主动获取焦点
      return false;
  }
}
//检测密码
function checkPsw() {
    var psV=psw.value;
    var reg=/^[0-9a-zA-Z]{6,12}$/;
    if(reg.test(psV)==true){
        pswError.innerText=" √ 密码设置正确";
        pswError.style.fontSize="12px";
        pswError.style.color="green";
        return true;
    }else {
        pswError.innerText=" × 密码格式错误,请重试";
        pswError.style.fontSize="12px";
        pswError.style.color="red";
        psw.focus(); // 可以让元素主动获取焦点
        return false;
    }
}

user.onblur=function () {
    checkName();
}
psw.onblur=function () {
    checkPsw();
}

btn.onclick=function () {
    if(( checkName() && checkPsw())==true){
        alert("注册成功!");
        window.open("login.html");
    }else {
        alert("注册失败,请重试!");
        return false;
    }
}

</script>
</body>
</html>

赏您的支持是我们创作的动力！