js验证表单提交的多种方法,submit,button, type='button'
js验证表单提交
- 总结:
- 第一种用submit按钮提交表单
- 第二种用button按钮进行提交
- 第三种用
总结:
不会进行表单的提交,就是一个死按钮,你怎么点击他都不会提交表单,一般用来配合js写一些表单里面的特效,
这并不是说它就不能用来传递表单里面的值了,也是可以的,我们可以配合ajax,实现数据的传递,仔细想一想如果真的用它和ajax的配合进行传值的话,那我们写一个from标签不久多此一举了吗?有下面两个简单的提交表单的按钮足以.
和都能够进行表单的提交.
切记在表单里面 图片,type=submit以及
第一种用submit按钮提交表单
<html>
<head>
<title>title>
head>
<body>
<form action="index.php" method="get" onsubmit="return abc()">
<h2>用户名:h2>
<p>
<input type="text" name="username" id='username' >
p>
<input type='submit' value='提交'>
form>
body>
<script type="text/javascript">
userobj=document.getElementById('username');
function abc()
{
if (userobj.value=="") {
alert("请输入用户名");
return false;
}else{
return true;
}
}
script>
html>
需要注意的地方是:
1. from标签上写οnsubmit=“return 函数名()”
第二种用button按钮进行提交
<html>
<head>
<title>title>
head>
<body>
<form action="index.php" method="get" onsubmit="return abc()">
<h2>用户名:h2>
<p>
<input type="text" name="username" id='username' >
p>
<button>提交button>
form>
body>
<script type="text/javascript">
userobj=document.getElementById('username');
function abc()
{
if (userobj.value=="") {
alert("请输入用户名");
return false;
}else{
return true;
}
}
script>
html>
1.上面的两种方法的思路是一样的,都是用
和进行表单的提交.
2.用from标签上的onsubmit属性判断是否进行表单的提交
说明:
<html>
<head>
<title>title>
head>
<body>
<form action="index.php" method="get" id="form_id">
<h2>用户名:h2>
<p>
<input type="text" name="username" id='username' >
p>
<input type='submit' value='提交'>
form>
body>
<script type="text/javascript">
userobj=document.getElementById('username');
formobj=document.getElementById('form_id');
formobj.onsubmit=function abc()
{
if (userobj.value=="") {
alert("请输入用户名");
return false;
}else{
return true;
}
}
script>
html>
给onsubmit返回一个false就能阻止表单的提交.
还是尽量的将代码写到js中,因为写在标签上显得比较乱.
第三种用
<html>
<head>
<title>title>
head>
<body>
<form>
<h2>用户名:h2>
<p>
<input type="text" name="username" id='username' >
p>
<input type='button' value='提交'>
form>
body>
<script type="text/javascript">
userobj=document.getElementById('username');
function abc()
{
if (userobj.value=="") {
alert("请输入用户名");
}else{
location.href='index.php';
在这儿实现表单的传值代码
}
}
script>
html>
由于这个type='button’无法提交表单,实现表单的传值需要用代码进行传值.
一般,提交表单前两种方法ok了.
注意:
type='button’按钮一般不用来提交表单,因为前面两种方法就可以非常简单的提交表单.
type='button’按钮的用途:
1.实现全选,全不选的特效.
2.实现点击按钮出现一些特效,而不提交表单.
例子:
<html>
<head>
<title>title>
head>
<body>
<form>
<h3>请选择你喜欢的运动:h3>
<label>
<input type='checkbox'>跑步
label>
<br>
<label>
<input type='checkbox'>爬山
label>
<br>
<label>
<input type='checkbox'>游泳
label>
<br>
<label>
<input type='checkbox'>下棋
label>
<p><input type='button' value='全选' id="btn">p>
form>
body>
<script type="text/javascript">
inpobjs=document.getElementsByTagName('input');
btnobj=document.getElementById('btn');
btn.onclick=function() {
for(i=0;i<inpobjs.length;i++)
{
inpobjs[i].checked=true;
}
}
script>
html>
这样的实例就不能用button或者type=sublimt做点击按钮 , 因为一点击表单就被提交了.