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>