input属性 required
required 属性
- required 属性规定必须在提交之前填写输入域（不能为空,以提交表单）。
- 除了 Internet Explorer 和 Safari，其他主流浏览器都支持 required 属性
- required 属性是一个布尔属性。
- required 属性是 HTML5 中的新属性。
- required 属性适用于以下类型的
<input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
语法
Name: <input type="text" type="text" name="usr_name" required="required" />
但是当我们想修改提示的文字怎么办，这要用到一个事件 oninvalid
oninvalid 事件
- 当提交
<input>元素无效时，会发生oninvalid事件。例如，如果设置了required属性被设置并且字段为空，则输入字段无效（required属性指定在提交表单之前必须填写输入字段）。
如果输入字段无效，则提醒一些文本
当然这还不够，还得有自定义错误提示信息的方法
setCustomValidity()方法
- 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
- 注意：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。
<input type="text" type="text" required oninvalid="setCustomValidity(\'不能为空\')"/>
- 解决办法：用obj.validity.patternMismatch判断，如果输入的格式正确，就将setCustomValidity 清空，使JavaScript重新判断validity.customError的值。
- 不仅仅可以配合 required，也可以配合正则及其他限制
<form action="地址" method="post">
<input id="input" type="text" name="" required oninvalid="setCustomValidity(\'不能为空\')" />
<input type="submit" onclick="setMyText()"/>
</form>
<script>
function setMyText() {
var obj = document.getElementById("input");
if (obj.validity.patternMismatch === true) {
obj.setCustomValidity("有值的");
} else {
obj.setCustomValidity(\'\');
}
}
</script>