纯JavaScript实现表单验证提示框

最新推荐文章于 2022-08-03 19:20:27 发布

coder阿龙

最新推荐文章于 2022-08-03 19:20:27 发布

阅读量1k

点赞数

分类专栏： html+css JavaScript

本文链接：https://blog.csdn.net/u014131617/article/details/108474819

版权

html+css 同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

在这里插入图片描述

js

var errorTip = {
    show:(ele,text)=> {
        if(ele && text){
           var mustEle =  document.getElementById(ele+"");
            if(mustEle){
                console.log('已找到该节点',mustEle)
                mustEle.innerHTML = ''
                mustEle.append('提示：'+text)
                // display:blank;
                mustEle.setAttribute('style','display:blank;opacity: 1;')

            }
        }
    },
    hide:(ele)=>{
        if(ele){
            var mustEle =  document.getElementById(ele+"");
            if(mustEle){
                console.log('已找到该节点',mustEle)
                mustEle.innerHTML = ''
                // display:none;
                mustEle.setAttribute('style','display:none;opacity: 0;') 
            }
        }
    }
}

使用

先引入js

<script src="./errorTip.js"></script>

在输入框下加

<div style="color:red" id="input-error-tip"></div>

样式可以自定义，id也可以自定义

显示

// 语法
 errorTip.show('DIV元素的ID','[提示内容]')
// demo
 errorTip.show('input-error-tip','输入的内容不能大于3')

隐藏

// 语法
errorTip.hide('DIV元素的ID')
// demo
errorTip.hide('input-error-tip')

完整代码

<!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>
<script src="./errorTip.js"></script>
<body>
  请输入 <input id="input-name">
  <div style="color:red" id="input-error-tip"></div>

  <button id="btn" onclick="submit()">提交</button>


  <script>
    function submit() {
      var value = document.getElementById("input-name").value
      console.log('输入的',value)
      if(value.length>3){
        errorTip.show('input-error-tip','输入的内容不能大于3')
      }else{
        errorTip.hide('input-error-tip')
        alert('提交成功')
      }

    }
   

  </script>

</body>
</html>