DOM（三）-09-(示例-表单校验-表单提交的两种方式)

来源：互联网发布：淘宝评论怎么挣钱编辑：程序博客网时间：2024/06/01 07:57
<!--表单提交两种方法：（1）修改默认submit，通过在form标签中定义事件onsubmit="checkForm()"；（2）自定义提交，自定义个button，通过onclick事件触发，用form对象中的submit方法控制--><!--以下是方法（1）--><html><head><style type="text/css"></style></head><body><script type="text/javascript">function checkUser(){//alert("haha");var flag;//定义标记，用户记录用户名是否校验成功var oUserName = document.getElementsByName("user")[0];var name = oUserName.value;//alert(name);var reg = new RegExp("^[a-z]{4}$","i");var oSpanNode = document.getElementById("userspan");if(reg.test(name)){oSpanNode.innerHTML = "用户名正确".fontcolor("blue");flag = true;}else{oSpanNode.innerHTML = "用户名错误".fontcolor("red");flag = false;}return flag;}//定义提交事件处理function checkForm(){//这里只需要判断校验结果是否正确即可if(checkUser()){return true;}else{return false;}}</script><!-- 因为校验结果无非两种：true和false，所以这里直接在onsubmit事件中用return语句得到校验结果，如果返回的是true，单击"提交数据"按钮就就提交数据，如果返回的是false，单击“提交数据”不会提交数据，这里只需要明确是true还是false即可，其余不管，底层代码已经完成其余功能 --><form onsubmit="return checkForm()">用户名称：<input type="text" name="user" onblur="checkUser()"/><span id="userspan"></span><br/>输入密码：<input type="text" name="psw" /><span id="pswspan"></span><br/><input type="submit" value="提交数据" /></form> <!-- 由于submit按钮只要一点击，就会把现有表单数据打包提交给服务端，正常情况下我们需要先对现有数据进行校验，校验通过后再提交，校验不通过绝对不提交，又因为submit带有默认提交事件，即不经过校验直接提交，所以我们必须修改这个默认提交事件，那么在form标签中定义新事件onsubmit="checkForm()" --></body></html><!-- ============================================================================================================= --><!--以下是方法（2）--><html><head><style type="text/css"></style></head><body><script type="text/javascript">function checkUser(){var flag;var oUserName = document.getElementsByName("user")[0];var name = oUserName.value;var reg = new RegExp("^[a-z]{4}$","i");var oSpanNode = document.getElementById("userspan");if(reg.test(name)){oSpanNode.innerHTML = "用户名正确".fontcolor("blue");flag = true;}else{oSpanNode.innerHTML = "用户名错误".fontcolor("red");flag = false;}return flag;}function mySubmit(){/* *打开DHTML API文档，在form对象中有如下方法： * submit：提交表单 */var oFormNode = document.getElementById("formid");if(checkUser()){//只有用户名正确才提交oFormNode.submit();}}</script><form id="formid">用户名称：<input type="text" name="user" onblur="checkUser()"/><span id="userspan"></span><br/>输入密码：<input type="text" name="psw" /><span id="pswspan"></span><br/></form> <input type="button" value="我的提交数据" onclick="mySubmit()" /></body></html>
0 0