Javascript处理表单提交的心得

在很多情况下,使用纯HTML form的action和input submit来提交表单是不合适的,因为我们可能要在表单数据发送之前处理这些数据,包括数据检查、加密等。通常这些任务都可以通过Javascript与Ajax技术配合实现,相信各位一定都有很多方法来实现。不过我要说的是在实现过程中可以绕过坑同时实现很多麻烦的特性的一些技巧。

用一句话来概括:使用form的onsubmit事件,而不是input的onclick事件来提交表单。

要充分理解这个方法,你需要了解一下几点:

  • 在onsubmit事件中一样可以用Ajax

  • 当form input没有name属性时,浏览器在submit时不会发送这些input中的数据

  • onsubmit的返回值为false时,浏览器不会跳转页面

  • onsubmit的返回值为true时,浏览器会跳转到form的action属性所描述的页面(如果没有action属性则刷新当前页面),同时参数带有form中具有name属性的input的值

  • onclick事件中Ajax提交的表单可能不会触发浏览器询问记住密码的功能,而submit的表单则一定会触发

例如,当我们需要加密发送用户的密码时:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<form onsubmit="return signin();">
<div>
<label for="username">用户名</label>
<input id="username" type="text" required/>
</div>
<div>
<label for="password">密码</label>
<input id="password" type="password" required/>
</div>
<button type="submit">登录</button>
</form>
<script>
function signin() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username == '') {
alert('请输入用户名');
document.getElementById('username').focus();
return false;
} else if (password == '') {
alert('请输入密码');
document.getElementById('password').focus();
return false;
}
xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', '/signin', false);
xmlHttp.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
var toSend='username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(sha256_digest(password)); // sha256_digest()是外部的方法,需要自行实现,或者使用https://www.yuki-nagato.com/js/sha256.js
xmlHttp.send(toSend);
// 由服务器返回'signed in'或'user verify error'
if (xmlHttp.responseText == 'signed in') {
return true;
} else if (xmlHttp.responseText == 'user verify error') {
alert('用户名或密码错误');
return false;
}
return false;
}
</script>

在生产环境下,使用onsubmit属性是不美观的,因此可以将代码改为如下:

1
2
3
4
5
6
7
8
9
10
11
12
<form id="signin">
...
</form>
<script>
document.getElementById("signin").addEventListener("submit", function(evt) {
if(!signin())
evt.preventDefault();
});
function signin() {
...
}
</script>

这样既可以对用户输入的合法性进行验证,又可以在不跳转页面的情况下向服务器发送加密后的用户密码并验证,如果密码正确再刷新页面;并且浏览器自动保存的密码是加密前的密码。

分享到 评论

评论功能暂时关闭

评论功能暂时关闭