js验证表单提交的多种方法,submit,button, type='button'

最新推荐文章于 2023-11-21 14:20:07 发布

柠檬A123

最新推荐文章于 2023-11-21 14:20:07 发布

阅读量1.3w

点赞数 6

分类专栏： web前端全栈

本文链接：https://blog.csdn.net/qq_45064049/article/details/90319839

版权

web前端全栈专栏收录该内容

8 篇文章 1 订阅

订阅专栏

js验证表单提交

总结:
第一种用submit按钮提交表单
第二种用button按钮进行提交
第三种用

总结:

<input type=‘button’ value=‘提交’ >不会进行表单的提交,就是一个死按钮,你怎么点击他都不会提交表单,一般用来配合js写一些表单里面的特效,
这并不是说它就不能用来传递表单里面的值了,也是可以的,我们可以配合ajax,实现数据的传递,仔细想一想如果真的用它和ajax的配合进行传值的话,那我们写一个from标签不久多此一举了吗?有下面两个简单的提交表单的按钮足以.

<input type=‘submit’ value=‘提交’>和<button>提交</button>都能够进行表单的提交.
切记在表单里面图片,type=submit以及<button>都能进行表单的提交.

第一种用submit按钮提交表单

<!doctype html>
<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按钮进行提交

<!doctype html>
<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.上面的两种方法的思路是一样的,都是用
<input type='submit' value='提交'>和<button>提交</button>进行表单的提交.
2.用from标签上的onsubmit属性判断是否进行表单的提交<form onsubmit="return abc()">
说明:
<button>和<input type=‘submit’ value=‘提交’>这两个按钮可以提交表单.
3
对于上面的两种方法,我将表单的是否提交直接写在了form标签上,其实也可以写在js中.

<!doctype html>
<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中,因为写在标签上显得比较乱.

第三种用<input type=‘button’ value=‘提交’ >

<!doctype html>
<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>