简易的表单验证

最新推荐文章于 2022-04-02 16:16:24 发布

青山绿水黄金树

最新推荐文章于 2022-04-02 16:16:24 发布

阅读量150

点赞数

分类专栏：表单验证文章标签： javascript

本文链接：https://blog.csdn.net/albert_chengxy/article/details/107974710

版权

表单验证专栏收录该内容

0 篇文章 0 订阅

订阅专栏

表单验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="user" id="user"><span></span><br>
    <input type="password" name="password" id="password"><span></span><br>
    <input type="text" name="email" id="email"><span></span><br>
    <script>
        var inputs=document.querySelectorAll("input");
        init();
        /*
          加上节流的ids变量 
         */
        function init(){
          inputs.forEach(function(item){
            item.ids=0;
            item.addEventListener("input",inputHandler)
          })
        }
        /*
          500ms以后再执行验证文本函数 
         */
        function inputHandler(e){
          if(this.ids) return;
          var input=this;
          this.ids=setTimeout(function(){  //回调函数会将this指向window
            clearTimeout(input.ids);
            input.ids=undefined;
            regText(input);
          },500)
        }
        /*
          获取当前点击的input的下个兄弟元素span ，传入input的value(输入的内容)和name(input的类型，比如用户名密码邮箱)
         */
        function regText(input){
          var span=input.nextElementSibling;
          if(regTest(input.value,input.name)){  //执行判断函数会利用正则表达式的对象方法返回true或false
            span.textContent="OK";
            span.style.color="green";
          }else{
            span.textContent="wrong";
            span.style.color="red";
          }
        }
        function regTest(txt,name){
          switch(name){
            case "user":
            return /^\w{8,36}$/.test(txt);
            case "password":
            return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(txt);
            case "email":
            return /^\w{3,36}@\w+\.(com|net|cn|org)$/.test(txt);
          }
        }
    </script>
  </body>
</html>

青山绿水黄金树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易的表单验证

表单验证<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body>
复制链接

扫一扫