05浏览器-03-操作表单和文件

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在前台对文件扩展名做检查，防止上传无效格式的文件。而文件的处理，都是由后台服务器来处理。