1、操作表单
1.1 表单提交
之前提到过使用JS操作DOM，实际上这里操作表单的方式是一样的。
获取表单中的值和状态等，再对其节点加以利用其属性如value、checked等属性就可以了。
这里主要描述表单提交的方式，一般浏览器默认点击 <button type="submit"> 时提交表单，实际上，我们稍作变化，下面也是我们经常可以使用的提交表单的方式：
第一种
- button响应click事件，触发方法抓取节点form，通过该对象的submit()方法进行提交
<!-- 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>14
1
<!-- HTML --> 2
<form id="test-form">3
<input type="text" name="test">4
<button type="button" onclick="doSubmitForm()">Submit</button>5
</form>6
7
<script>8
function doSubmitForm() {9
var form = document.getElementById('test-form');10
// 可以在此修改form的input...11
// 提交form:12
form.submit();13
}14
</script>第二种
- 响应<form>的onsubmit事件，提交form时作修改
<!-- 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...
// 继续下一步:
return true;
}
</script>14
1
<!-- HTML -->2
<form id="test-form" onsubmit="return checkForm()">3
<input type="text" name="test">4
<button type="submit">Submit</button>5
</form>6
7
<script>8
function checkForm() {9
var form = document.getElementById('test-form');10
// 可以在此修改form的input...11
// 继续下一步:12
return true;13
}14
</script>return true来表示浏览器继续提交，如果return false，浏览器将不会继续提交form。这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。
1.2 密码提交
很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。
所以在提交之前通过JS转换：
function checkForm() {
var pwd = document.getElementById('password');
// 把用户输入的明文变为MD5:
pwd.value = toMD5(pwd.value);
// 继续下一步:
return true;
}7
1
function checkForm() {2
var pwd = document.getElementById('password');3
// 把用户输入的明文变为MD5:4
pwd.value = toMD5(pwd.value);5
// 继续下一步:6
return true;7
}这就是你有时候输入了账号密码，发现点击登陆提交时，密码框的显示会突然从几个星变成32个星（因为MD5有32个字符）
如果不想有这种页面的明显变化，可以利用hidden的input，用来存储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');
// 把用户输入的明文变为MD5:
md5_pwd.value = toMD5(input_pwd.value);
// 继续下一步:
return true;
}
</script>x
1
<!-- HTML -->2
<form id="login-form" method="post" onsubmit="return checkForm()">3
<input type="text" id="username" name="username">4
<input type="password" id="input-password">5
<input type="hidden" id="md5-password" name="password">6
<button type="submit">Submit</button>7
</form>8
9
<script>10
function checkForm() {11
var input_pwd = document.getElementById('input-password');12
var md5_pwd = document.getElementById('md5-password');13
// 把用户输入的明文变为MD5:14
md5_pwd.value = toMD5(input_pwd.value);15
// 继续下一步:16
return true;17
}18
</script>注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。
2、操作文件
在HTML表单中，可以上传文件的唯一控件就是<input type="file">
注意：当一个表单包含<input type="file">时，表单的enctype必须指定为 multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
处于安全考虑，JS无法获取上传的某个文件的真实路径，也无法通过更改<input type="file">的value属性来改变文件内容。
通常，对于文件上传，JS在前台对文件扩展名做检查，防止上传无效格式的文件。而文件的处理，都是由后台服务器来处理。