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

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

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

二、利用H5新增的required属性

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

如果使用该属性,则字段是必填(或必选)的。

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

用法:



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

 

关于表单验证错误提示的几种方式_第1张图片

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

三、通过innerHTML

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

用法:


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

你可能感兴趣的:(Web开发)