required修改提示文字

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>