JavaScript 表單

目錄

input、textarea、password、select等元素都可以通過(guò)value屬性取到它們的值。

select

select是下拉列表元素。

<div>
<label for="os">Operating System</label>
<select name="os" id="os">
    <option>Choose</option>
    <optgroup label="Windows">
        <option value="7 Home Basic">7 Home Basic</option>
        <option value="7 Home Premium">7 Home Premium</option>
        <option value="7 Professional">7 Professional</option>
        <option value="7 Ultimate">7 Ultimate</option>
        <option value="Vista">Vista</option>
        <option value="XP">XP</option>
    </optgroup>
<select>
</div>

可以通過(guò)value屬性取到用戶選擇的值。

var data = document.getElementById('selectMenu').value;

selectedIndex可以設(shè)置選中的項(xiàng)目（從0開(kāi)始）。如果用戶沒(méi)有選中任何一項(xiàng)，selectedIndex等于-1。

document.getElementById('selectMenu').selectedIndex = 1;

select元素也可以設(shè)置為多選。

<select name="categories" id="categories" multiple>

設(shè)為多選時(shí)，value只返回選中的第一個(gè)選項(xiàng)。要取出所有選中的值，就必須遍歷select的所有選項(xiàng)，檢查每一項(xiàng)的selected屬性。

var selected = [];
for (var i = 0, count = elem.options.length; i < count; i++) {
  if (elem.options[i].selected) {
    selected.push(elem.options[i].value);
  }
}

checkbox

checkbox是多選框控件，每個(gè)選擇框只有選中和不選中兩種狀態(tài)。

<input type="checkbox" name="toggle" id="toggle" value="toggle">

checked屬性返回一個(gè)布爾值，表示用戶是否選中。

var which = document.getElementById('someCheckbox').checked;

checked屬性是可寫(xiě)的。

which.checked = true;

value屬性可以獲取單選框的值。

if (which.checked) {
  var value = document.getElementById('someCheckbox').value;
}

radio

radio是單選框控件，同一組選擇框同時(shí)只能選中一個(gè)，選中元素的checked屬性為true。由于同一組選擇框的name屬性都相同，所以只有通過(guò)遍歷，才能獲得用戶選中的那個(gè)選擇框的value。

<input type="radio" name="gender" value="Male"> Male </input>
<input type="radio" name="gender" value="Female"> Female </input>
<script>
var radios = document.getElementsByName('gender');
var selected;
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    selected = radios[i].value;
    break;
  }
}
if (selected) {
  // 用戶選中了某個(gè)選項(xiàng)
}
</script>

上面代碼中，要求用戶選擇“性別”。通過(guò)遍歷所有選項(xiàng)，獲取用戶選中的項(xiàng)。如果用戶未做任何選擇，則selected就為undefined。

HTML 5表單驗(yàn)證

所謂“表單驗(yàn)證”，指的是檢查用戶提供的數(shù)據(jù)是否符合要求，比如Email地址的格式。

檢查用戶是否在input輸入框之中填入值。

if (inputElem.value === inputElem.defaultValue) {
  // 用戶沒(méi)有填入內(nèi)容
}

HTML 5原生支持表單驗(yàn)證，不需要JavaScript。

<input type="date" >

上面代碼指定該input輸入框只能填入日期，否則瀏覽器會(huì)報(bào)錯(cuò)。

但有時(shí)，原生的表單驗(yàn)證不完全符合需要，而且出錯(cuò)信息無(wú)法指定樣式。這時(shí)，可能需要使用表單對(duì)象的noValidate屬性，將原生的表單驗(yàn)證關(guān)閉。

var form = document.getElementById("myform");
form.noValidate = true;

form.onsubmit = validateForm;

上面代碼先關(guān)閉原生的表單驗(yàn)證，然后指定submit事件時(shí)，讓JavaScript接管表單驗(yàn)證。

此外，還可以只針對(duì)單個(gè)的input輸入框，關(guān)閉表單驗(yàn)證。

form.field.willValidate = false;

每個(gè)input輸入框都有willValidate屬性，表示是否開(kāi)啟表單驗(yàn)證。對(duì)于那些不支持的瀏覽器（比如IE8），該屬性等于undefined。

麻煩的地方在于，即使willValidate屬性為true，也不足以表示瀏覽器支持所有種類的表單驗(yàn)證。比如，F(xiàn)irefox 29不支持date類型的輸入框，會(huì)自動(dòng)將其改為text類型，而此時(shí)它的willValidate屬性為true。為了解決這個(gè)問(wèn)題，必須確認(rèn)input輸入框的類型（type）未被瀏覽器改變。

if (field.nodeName === "INPUT" && field.type !== field.getAttribute("type")) {
    // 瀏覽器不支持該種表單驗(yàn)證，需自行部署JavaScript驗(yàn)證
}

checkValidity方法，setCustomValidity方法，validity對(duì)象

checkValidity方法表示執(zhí)行原生的表單驗(yàn)證，如果驗(yàn)證通過(guò)返回true。如果驗(yàn)證失敗，則會(huì)觸發(fā)一個(gè)invalid事件。使用該方法以后，會(huì)設(shè)置validity對(duì)象的值。

每一個(gè)表單元素都有一個(gè)validity對(duì)象，它有以下屬性。

• valid：如果該元素通過(guò)驗(yàn)證，則返回true。
• valueMissing：如果用戶沒(méi)填必填項(xiàng)，則返回true。
• typeMismatch：如果填入的格式不正確（比如Email地址），則返回true。
• patternMismatch：如果不匹配指定的正則表達(dá)式，則返回true。
• tooLong：如果超過(guò)最大長(zhǎng)度，則返回true。
• tooShort：如果小于最短長(zhǎng)度，則返回true。
• rangeUnderFlow：如果小于最小值，則返回true。
• rangeOverflow：如果大于最大值，則返回true。
• stepMismatch：如果不匹配步長(zhǎng)（step），則返回true。
• badInput：如果不能轉(zhuǎn)為值，則返回true。
• customError：如果該欄有自定義錯(cuò)誤，則返回true。

setCustomValidity方法用于自定義錯(cuò)誤信息，該提示信息也反映在該輸入框的validationMessage屬性中。如果將setCustomValidity設(shè)為空字符串，則意味該項(xiàng)目驗(yàn)證通過(guò)。

• Craig Buckler, HTML5 Forms: JavaScript and the Constraint Validation API