JavaScript 操作表單

HTML表單的輸入控件主要有以下幾種：

文本框，對(duì)應(yīng)的<input type="text">抵赢，用于輸入文本欺劳；
口令框，對(duì)應(yīng)的<input type="password">铅鲤，用于輸入口令划提；
單選框，對(duì)應(yīng)的<input type="radio">邢享，用于選擇一項(xiàng)鹏往；
復(fù)選框，對(duì)應(yīng)的<input type="checkbox">骇塘，用于選擇多項(xiàng)伊履；
下拉框，對(duì)應(yīng)的<select>款违，用于選擇一項(xiàng)唐瀑；
隱藏文本，對(duì)應(yīng)的<input type="hidden">插爹，用戶不可見哄辣，但表單提交時(shí)會(huì)把隱藏文本發(fā)送到服務(wù)器。

獲取值

先獲得<input>節(jié)點(diǎn)的引用赠尾，就可以直接調(diào)用value獲得對(duì)應(yīng)的用戶輸入值力穗，適用于text、password萍虽、hidden以及select睛廊。而對(duì)于單選框和復(fù)選框，value屬性返回的永遠(yuǎn)是HTML預(yù)設(shè)的值杉编，而我們需要獲得的實(shí)際是用戶是否“勾上了”選項(xiàng)，所以應(yīng)用checked判斷咆霜。

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

設(shè)置值

和獲取值類似邓馒，對(duì)于text、password蛾坯、hidden以及select光酣，直接設(shè)置value就可以。而對(duì)于單選框和復(fù)選框脉课，設(shè)置checked為true或false即可救军。

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內(nèi)容已更新

HTML5控件

提交表單

方法一：通過<form>元素的submit()方法提交一個(gè)表單
例如财异，響應(yīng)一個(gè)<button>的click事件，在JavaScript代碼中提交表單：

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

這種方式的缺點(diǎn)是擾亂了瀏覽器對(duì)form的正常提交：瀏覽器默認(rèn)點(diǎn)擊<button type="submit">時(shí)提交表單唱遭，或者用戶在最后一個(gè)輸入框按回車鍵戳寸。

方法二：響應(yīng)<form>本身的onsubmit事件，在提交form時(shí)作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 繼續(xù)下一步:
    return true;
}
</script>

注意要return true來告訴瀏覽器繼續(xù)提交拷泽，如果return false疫鹊，瀏覽器將不會(huì)繼續(xù)提交form，這種情況通常對(duì)應(yīng)用戶輸入有誤司致，提示用戶錯(cuò)誤信息后終止提交form拆吆。

在檢查和修改<input>時(shí)，要充分利用<input type="hidden">來傳遞數(shù)據(jù)脂矫。

例如枣耀，很多登錄表單希望用戶輸入用戶名和口令，但是庭再，安全考慮捞奕，提交表單時(shí)不傳輸明文口令，而是口令的MD5佩微。

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用戶輸入的明文變?yōu)镸D5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 繼續(xù)下一步:
    return true;
}
</script>

注意到id為md5-password的<input>標(biāo)記了name="password"缝彬，而用戶輸入的id為input-password的<input>沒有name屬性。沒有name屬性的<input>的數(shù)據(jù)不會(huì)被提交哺眯。

Demo

檢查用戶注冊(cè)信息是否正確谷浅，在以下情況不滿足時(shí)報(bào)錯(cuò)并阻止提交表單：

用戶名必須是3-10位英文字母或數(shù)字；
口令必須是6-20位奶卓；
兩次輸入口令必須一致一疯。

參考：廖雪峰

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

JavaScript 操作 表單

獲取值

設(shè)置值

HTML5控件

提交表單

Demo

JavaScript 操作表單