JavaScript全栈学习13-操作表单 操作文件
操作表单
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。
不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。
HTML表单的输入控件主要有以下几种：
- 文本框，对应的
<input type="text">，用于输入文本； - 口令框，对应的
<input type="password">，用于输入口令； - 单选框，对应的
<input type="radio">，用于选择一项； - 复选框，对应的
<input type="checkbox">，用于选择多项； - 下拉框，对应的
<select>，用于选择一项； - 隐藏文本，对应的
<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。
获取值
如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：
// <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
设置值
设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
对于单选框和复选框，设置checked为true或false即可。
var mon = document.getElementById('monday');
undefined
mon.checked = true;
true
HTML5控件
HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签：
<input type="date" value="2015-07-01" /><br /><br />
<input type="color" value="#ff0000" /><br /><br />
<input type="datetime" value="2015-07-01" /><br /><br />
<input type="datetime-local" value="2015-07-01T14:32:21" /><br /><br />
不支持HTML5的浏览器无法识别新的控件，会把它们当做type="text"来显示。支持HTML5的浏览器将获得格式化的字符串。例如，type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期，或者空字符串。
提交表单
最后，JavaScript可以以两种方式来处理表单的提交（AJAX方式在后面章节介绍）。
方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<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>
这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应<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>
注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。
在检查和修改<input>时，要充分利用<input type="hidden">来传递数据。
例如，很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改<input>：
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<lable>用户名：</lable><input type="text" id="username" name="username" /> <br />
<lable>口 令：</lable><input type="password" id="password" name="password" /> <br />
<button type="submit">Submit</button> <br />
</form>
<script>
function checkForm() {
var pwd = document.getElementById('password');
console.log(pwd.value);
// 把用户输入的明文变为MD5:
// Uncaught ReferenceError: toMD5 is not defined
pwd.value = toMD5(pwd.value);
alert(pwd.value+' is not correct.');
// 继续下一步:
//return true;
return false;
}
function toMD5(s) {
return s + Date.now();
}
</script>
这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个*变成32个*（因为MD5有32个字符）。
要想不改变用户的输入，可以利用<input type="hidden">实现：
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<lable>用户名：<input type="text" id="username" name="username" /> </lable><br />
<!-- 没有`name`属性的`<input>`的数据不会被提交。 name="password" -->
<lable>口 令：</lable><input type="password" id="input-password" /> <br />
<input type="hidden" id="md5-password" name="password" />
<button type="submit">Submit</button> <br />
</form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
console.log(input_pwd.value);
var md5_pwd = document.getElementById('md5-password');
// 把用户输入的明文变为MD5:
// Uncaught ReferenceError: toMD5 is not defined
md5_pwd.value = toMD5(input_pwd.value);
alert(md5_pwd.value+' is not correct.');
// 继续下一步:
//return true;
return false;
}
function toMD5(s) {
return s + Date.now();
}
</script>
注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。
练习
利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：
- 用户名必须是3-10位英文字母或数字；
- 口令必须是6-20位；
- 两次输入口令必须一致。
<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
<p id="test-error" style="color:red"></p>
<p>
用户名: <input type="text" id="username" name="username" onchange="return checkRegisterForm()">
<!-- oninput 在value改变时实时触发，但是通过js改变value时不会触发；
onchange事件 在内容改变（两次内容有可能相等）且失去焦点时触发；
onpropertychange事件 是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件
onBlur:当输入框失去焦点后
oninput="return checkRegisterForm() -->
<label id='userName_label'></label>
</p>
<p>
口 令: <input type="password" id="password" name="password" onchange="return checkRegisterForm()">
<label id='pwd_label'></label>
</p>
<p>
重复口令: <input type="password" id="password-2" onchange="return checkRegisterForm()">
<label id='pwd2_label'></label>
</p>
<p>
<button type="submit">提交</button> <button type="reset">重置</button>
</p>
</form>
<script>
'use strict';
var checkRegisterForm = function () {
var userName = document.getElementById('username');
var pwd = document.getElementById('password');
var pwd2 = document.getElementById('password-2');
var test_error = document.getElementById('test-error');
// \w 匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的"单词"字符使用Unicode字符集。
// \W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
var userName_reg = /^\w{3,10}$/;
//.点 匹配除“\n”和"\r"之外的任何单个字符。要匹配包括“\n”和"\r"在内的任何字符，请使用像“[\s\S]”的模式。
// \S 匹配任何可见字符。等价于[^ \f\n\r\t\v]。
var pwd_reg = /^.{6,20}$/;
// var userName_label = document.createElement('label');
// var pwd_label = document.createElement('label');
// var pwd2_label = document.createElement('label');
var userName_label = document.getElementById('userName_label');
var pwd_label = document.getElementById('pwd_label');
var pwd2_label = document.getElementById('pwd2_label');
console.log('用户名：' + userName.value + ' Password：' +pwd.value + ' Password2：' +pwd2.value);
if(!userName_reg.test(userName.value)){
test_error.innerText = '表单录入不合法';
userName_label.setAttribute('style','color:red');
userName_label.innerText = '用户名必须是3-10位英文字母或数字。';
} else {
userName_label.setAttribute('style','color:green');
userName_label.innerText = '√';
}
if(!pwd_reg.test(pwd.value)) {
test_error.innerText = '表单录入不合法';
pwd_label.setAttribute('style','color:red');
pwd_label.innerText = '口令必须是6-20位。';
// pwd.parentElement.appendChild(pwd_label);
} else {
pwd_label.setAttribute('style','color:green');
pwd_label.innerText = '√';
}
if(!pwd_reg.test(pwd2.value)) {
test_error.innerText = '表单录入不合法';
pwd2_label.setAttribute('style','color:red');
pwd2_label.innerText = '口令必须是6-20位。';
} else {
pwd2_label.setAttribute('style','color:green');
pwd2_label.innerText = '√';
}
if(pwd_reg.test(pwd.value) && pwd_reg.test(pwd2.value) && pwd.value!=pwd2.value) {
test_error.innerText = '两次输入口令必须一致。';
// return false;
}
if (userName_reg.test(userName.value) && pwd_reg.test(pwd.value) && pwd_reg.test(pwd2.value)
&& pwd.value===pwd2.value) {
test_error.innerText = '';
return true;
} else {
return false;
}
}
// 测试:
;(function () {
window.testFormHandler = checkRegisterForm;
var form = document.getElementById('test-register');
if (form.dispatchEvent) {
var event = new Event('submit', {
bubbles: true,
cancelable: true
});
form.dispatchEvent(event);
} else {
form.fireEvent('onsubmit');
}
})();
</script>
操作文件
在HTML表单中，可以上传文件的唯一控件就是<input type="file">。
注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：
待上传文件:
通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件：
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.');
return false;
}
File API
由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。
随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。
HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
下面的例子演示了如何读取用户选取的图片文件，并在一个<div>中预览图像：
<form method="post" action="http://localhost/test" enctype="multipart/form-data">
<p>图片预览：</p>
<p></p>
<div id="test-image-preview" style="border: 1px solid #ccc; width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"></div>
<p></p>
<p>
<input type="file" id="test-image-file" name="test">
</p>
<p id="test-file-info"></p>
</form>
<script>
'use strict'
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用，不允许选择多个文件。
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
</script>
上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
回调
上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。
你可能会问，单线程模式执行的JavaScript，如何处理多任务？
在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：
reader.readAsDataURL(file);
就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：
reader.onload = function(e) {
// 当文件读取完成后，自动调用此函数:
};
当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。
