js实现表单提交submit(),onsubmit

更新时间:2023-07-22 20:29:44 阅读: 评论:0

js实现表单提交submit(),onsubmit
通常表单的提交有两种⽅式,⼀是直接通过html的form提交,代码如下:
<form action="" method="" id="forms">法在我心中
<input type="text" name="urname" value=""/>
revolutionize<input type="password" name="pwd" value=""/>
<input type="submit" value="提交"/>
charles dickens</form>
但有时候我们会出于安全⾓度考虑,给⽤户输⼊的密码进⾏加密,⽅法⼀就没办法解决这个问题,这时候我们同常会选择另⼀种⽅法,使⽤javaScript来进⾏表单提交,代码⼊下:
<!--HTML-->
<form action="" method="" id="test_form">
<input type="text" name="urname" value=""/>
<input type="password" name="pwd" value=""/>
voanews<button type="button" onclick='doSubmitForm()'>提交<button/>
</form>
<script>
var form = ElementById('test_form');
//再次修改input内容
form.submit();
</script>
这种⽅法有个缺点就是,打乱正常的表单提交程序,通常⽤户输⼊完成后点击回车键就可以提交,但是这个⽅法实现不了,所以,使⽤下⾯的⽅法便可以解决这个问题,,通过form⾃⾝的onsubmit⽅法,来触发提交,然后进⾏input的修改:
<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
<input type='text' name='urname' value=''/>
<input type='password' name='pwd' value =''/>
<button type='submit'>提交<button/>
<form/>
<script>
function checkForm(){
var form = ElementById('test_form');
//可在此修改input
emini
//进⾏下⼀步
return true;
圣诞节快乐用英语怎么说
}
<script/>
注意,checkForm()⽅法中,return true时,表单才会正常提交,为fal时,浏览器将不会提交,通常是⽤户的密码输⼊错误时,终⽌提交。
之前说过,为安全考虑⽤户提交时,⼀般对密码进⾏加密处理,代码如下:
<!--HTML-->
efficiently<form id='test_form' action='' method='' omsubmit='return checkForm()'>
<input type='text' name='urname' value=''/>
<input type='password' name='pwd' id='pwd' value =''/>
<button type='submit'>提交<button/>
<form/>
<script>
imperial college londonfunction checkForm(){top什么意思
var pwd= ElementById('pwd');
pwd.value= toMD5(pwd.value);
//进⾏下⼀步
return true;
}
<script/>
这种做法看上去没问题,但是当⽤户输⼊完成后,提交会发现密码框的*会由⼏个瞬间变成 32个,这是由于MD5加密造成的(MD5有32个字符);如果想避免出现这种情况,需要充分利⽤到<input type='hidden'>,代码如下:
<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
<input type='text' name='urname' value=''/>
<input type='password'  id='input_pwd' value =''/>
<input type='hidden' name='pwd' id='md5_pwd' value=''/>
<button type='submit'>提交<button/>
<form/>
<script>
function checkForm(){
var input_pwd= ElementById('input_pwd');
静女翻译
var md5_pwd= ElementById('md5_pwd');
md5_pwd.value= toMD5(input_pwd.value);
//进⾏下⼀步
return true;
}
<script/>
注意,<input type='password'/>是⽤户输⼊密码的input框并,没有设置 name 属性,⽽是给<input type='hidden' />设置了name='pwd',这样表单提交只会提交带有name属性的输⼊框,从⽽解决了上⾯的那个问题。

本文发布于:2023-07-22 20:29:44,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/1111453.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:提交   表单   问题   密码
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图