×

验证表单之正则表达式

作者:shiji2018.05.06来源:Web前端之家浏览:4630评论: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>
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/js123432848230iro.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    换链接:http://davin.xin/pc/navigation...

  • 访客

    alert('哈哈')...

  • admin

    可以的...

  • 前端面试题

    你好,可以换一下链接吗?...

  • admin

    关于微信小程序,后面会出一些文章的,请关注网站更新。。。...

  • webred

    博主可以分享点小程序的文章......

  • 访客

    可以用。...

  • admin

    可以的,可以联系下QQ,或者加群。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero