阻止form空表单提交----JavaScript
网上看到很不错的阻止form空表单提交
第一种方法
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 | < div class="warp"> < h2 >登录到pfan空间</ h2 > < p >这里有更多的知识分享,交流。</ p > < form action="/register" method = "post" > < input type="text" name = "username" placeholder = "请输入注册用户名"> < br /> < input type="password" name = "pwd" placeholder = "请输入初始密码"> < br /> < input type="password" name = "aginpwd" placeholder = "请再次输入密码"> < br /> < input type="submit" value ="注册" class="login_btn"> </ form > </ div > < script > var form = document.forms[0], submit = document.querySelector(".login_btn"), inputBtn = document.getElementsByTagName("input"); console.log(form); form.onsubmit = function(){ if(inputBtn[0].value == ""){ alert("请您认真填写注册用户名!"); return false; }else if(inputBtn[1].value == ""){ alert("请您认真输入初始密码!"); return false; }else if(inputBtn[2].value == ""){ alert("请您再次输入密码"); return false; }else if(inputBtn[1].value != inputBtn[2].value){ alert("两次密码输入不匹配,请更正!"); return false; } } </ script > |
第二种
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 | < div class="warp"> < h2 >登录到pfan空间</ h2 > < p >这里有更多的知识分享,交流。</ p > < form action="/register" method = "post" > < input type="text" name = "username" placeholder = "请输入注册用户名"> < br /> < input type="password" name = "pwd" placeholder = "请输入初始密码"> < br /> < input type="password" name = "aginpwd" placeholder = "请再次输入密码"> < br /> < input type="submit" value ="注册" class="login_btn"> </ form > </ div > < script > var form = document.forms[0], submit = document.querySelector(".login_btn"), inputBtn = document.getElementsByTagName("input"); console.log(form); form.addEventListener("submit",function(e){ if(inputBtn[0].value == ""){ alert("请您认真填写注册用户名!"); e.preventDefault(); }else if(inputBtn[1].value == ""){ alert("请您认真输入初始密码!"); e.preventDefault(); }else if(inputBtn[2].value == ""){ alert("请您再次输入密码"); e.preventDefault(); }else if(inputBtn[1].value != inputBtn[2].value){ alert("两次密码输入不匹配,请更正!"); e.preventDefault(); } },false); </ script > |
参考:http://www.cnblogs.com/pingfan1990/p/4655233.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步