关于表单验证错误提示的几种方式

版权声明： https://blog.csdn.net/qq_41573860/article/details/82750116

一、用alert()弹出提示框（不提倡）。

通过alert弹出提示框，但输入框多的话会不断弹出提示框，每次都要点确定，很麻烦。

二、利用H5新增的required属性

required 属性规定必需在提交之前填写输入字段。

如果使用该属性，则字段是必填（或必选）的。

注释：required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

用法：

<input id="user" required="required">
<input type="submit" value="提交"/>
<script>

 var user = document.querySelector('#user');
  user.setCustomValidity("提示信息");

</script>

此方法需要配合提交按钮， 通过点击按钮会自动检查所有文本是否已经填入信息 ，没有填入信息的文本框会弹出一个提示框，提示框的内容可以自定。

 提示信息可以通过getElementById()方法获取对应输入框的id，然后通过setCustomValidity可以设置提示信息。

扫描二维码关注公众号，回复： 5739630 查看本文章

三、通过innerHTML

当输入框失去焦点后，判断当前输入框的内容是否为空（value值）或者直接if语句，如果为空就将错误信息提示的div信息显示出来，通过innerHTML来在指定位置显示提示信息,可以搭配onBlur事件也可以搭配提交按钮的submit或者oninput;

用法：

<input id="user" required="required" onBlur="check()">
<script>
function check(){
if(user.value()==""){
    document.getElementById("user").innerHTML="请输入姓名"
}
}
</script>

详细的验证还可以细分if语句，或者搭配正则表达式使用。