纯JavaScript实现表单验证提示框

痛定思痛。 2022-12-05 01:37 178阅读 0赞

效果  
![在这里插入图片描述][20200908185404704.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70_pic_center]

## js ##

## 使用 ##

##### 先引入js #####

##### 在输入框下加 #####

样式可以自定义，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>

## 案例效果 ##

![在这里插入图片描述][20200908190311671.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70_pic_center 1]

[20200908185404704.png_pic_center]: /images/20221123/2c50858ee54a4861bd178fd6d3b36cfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0286a4415c8c43f6bf7c73b616630c76.png
[20200908190311671.png_pic_center]: /images/20221123/5f19871338be40a0836ce8dc78343390.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/fc3308f4ddd74d6f927b6c71adc37be6.png