表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例
原始的表单提交有 button 按钮提交和 <input />类型的。它们又什么区别呢?
(1) 默认表单提交
(2)默认不会提交表单
(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面
(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转
(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面
(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面
(7) 下面的提交会发生什么?
分析 : 点击提交按钮:
(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 <form>的 onsubmit 句柄,又因为该句柄 return false 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'
(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效
现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。
avaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):
function validate_required(field,alerttxt){
with (field)
{
if (value==null||value=="")
{alert(alerttxt)return false}
else {return true}
}
}
下面是连同 HTML 表单的代码:
<html><head>
<script type="text/javascript">function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt)return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus()return false}
}
}</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
function validate_email(field,alerttxt){
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt)return false}
else {return true}
}
}
下面是连同 HTML 表单的完整代码:
<html><head>
<script type="text/javascript">function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt)return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus()return false}
}
}</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>