DOM之Form对象（一）

来源：互联网发布：vue项目案例知乎编辑：程序博客网时间：2024/05/19 19:12

当用户点击递交按钮或点击单行文本输入框按下回车键后，表单递交到3w服务器之前就会发生onsubmit()事件，典型用法就是检查form表单收到数据的合法性和完整性,防止将不正确的数据传递给3w服务器
Form 对象的 onsubmit 属性指定了一个事件句柄函数。当用户单击了表单中的 Reset 按钮而提交一个重置时，就会调用这个事件句柄函数。注意，当调用方法Form.submit() 时，该处理器函数不会被调用。

如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script language="javascript">        function dosubmit(frm) {            if (frm.mem_id.value.length != 6) {                alert("会员号必须是6位");                return false;            }            else {                var mem_value = frm.mem_id.value;                for (var i = 0; i < mem_value.length; i++) {                    if (mem_value.charAt(i) < '0' ||                        mem_value.charAt(i) > '9') {                        alert("会员号只能是数字");                        return false;                    }                }            }            return true;        }    </script></head><body>    <form name="form1" target="_blank" method="post"        onsubmit="return dosubmit(this)">        <!--若提交成功，浏览器打开一个新的窗口-->        会员号码(6位数字):<input type="text" name="mem_id" />        <input type="submit" name="submit1" value="递交" />    </form></body></html>

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script language="javascript">        function dosubmit(frm) {            if (frm.mem_id.value.length != 6) {                alert("会员号必须是6位");                return false;            }            else {                var mem_value = frm.mem_id.value;                for (var i = 0; i < mem_value.length; i++) {                    if (mem_value.charAt(i) < '0' ||                        mem_value.charAt(i) > '9') {                        alert("会员号只能是数字");                        return false;                    }                }                if (i == mem_value.length)                    frm.submit();            }            return true;        }    </script></head><body>    <form name="form1" target="_blank" method="post"        onsubmit="dosubmit(this);return false">        <!--若提交成功，浏览器打开一个新的窗口-->        会员号码(6位数字):<input type="text" name="mem_id" />        <input type="submit" name="submit1" value="递交" />    </form></body></html>

<html><body>    <form id="myForm">        Firstname:        <input id="fname" type="text" value="Mickey" />        Lastname:        <input id="lname" type="text" value="Mouse" />        <input id="sub" type="button" value="Submit" />    </form>    <p>        Get the value of all the elements in the form:<br />        <script type="text/javascript">            var x = document.getElementById("myForm");            for (var i = 0; i < x.length; i++) {                document.write(x.elements[i].value);                document.write("<br />");                document.write(x.elements[i].type);                document.write("<br />");            }        </script>    </p></body></html>

<html><head>    <script type="text/javascript">        function changeAction() {            var x = document.getElementById("myForm")            alert("Original action: " + x.action)            x.action = "../htmldom/index.asp.htm"            /*tpa=http://www.w3school.com.cn/htmldom/index.asp*/            alert("New action: " + x.action)            x.submit()        }    </script></head><body>    <form id="myForm" action="http://www.w3school.com.cn/i/eg_smile.gif">        名称：<input type="text" value="米老鼠" />        <input type="button" onclick="changeAction()"            value="改变 action 属性并提交表单" />    </form></body></html>

0 0