JavaScript form对象，表单简单验证

最新推荐文章于 2024-10-06 12:26:18 发布

houyanhua1

最新推荐文章于 2024-10-06 12:26:18 发布

阅读量478

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/78565601

版权

JavaScript 专栏收录该内容

140 篇文章

订阅专栏

本文介绍了HTML表单的基础知识，包括form对象的属性、如何通过name属性查找表单元素及事件返回值的影响等。此外，还详细讲解了三种表单提交的方法，并提供了一个表单验证的实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、form对象的属性
name：获取表单的名称，该name一般给JS使用。
method：表单提交方法。
GET方式：不安全、数据量较小、不能上传附件。
POST方式：相对安全、海量数据、能上传附件。
action：表单数据的处理程序。一般是PHP文件。
enctype：表单数据的编码方式(加密)。
application/x-www-form-urlencoded 默认
multipart/form-data 可以上传附件

二、表单中通过name属性找对象
通过name找对象，必须是document开头。一般在表单中使用name，其他标签用id，<div>用id。
通过name找对象，必须要符合三层结构。
格式： document.formObj.elementObj

三、事件返回值
事件的返回值，会影响事件的默认动作。
如果事件返回值为false，则阻止默认动作执行。
如果事件返回值为true或空，则默认动作执行。
如果事件没有任何返回值，则默认动作执行。
受影响的事件有两个：onclick、onsubmit
其它事件的返回值，不会影响默认动作。

例如：<form name="form1" method="post" action="login.php" οnsubmit="return checkForm()" > </form>

四、表单提交的三种方法：
1、submit按钮，结合form标签的onsubmit事件。 <form name="form1" method="post" action="login.php" οnsubmit="return checkForm()" > </form> checkForm()需要return
2、submit按钮，结合onclick事件。 <input type="submit" value="提交表单" οnclick="return checkForm()" /> checkForm()需要return
3、button按钮，结合onclick事件。 <input type="button" value="提交表单" οnclick="return checkForm()" /> js中：checkForm(){document.form1.submit();} 不需要return

实例代码：表单简单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：表单验证
function focus_username()
{
	//获取id=result_username的元素对象
	var divObj = document.getElementById("result_username");
	//写入提示信息
	divObj.innerHTML = "请输入你的用户名";
	divObj.style.color = "#ccc";
}
function blur_username()
{
	//获取name=username和id=result_username的元素对象
	var inputObj = document.form1.username;
	var divObj = document.getElementById("result_username");
	//用户名验证
	if(document.form1.username.value=="")
	{
		divObj.innerHTML = "对不起，用户名不能为空！";
		divObj.style.color = "red";
		return false;
	}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
	{
		divObj.innerHTML = "用户名长度必须介于5-20个字符之间！";
		divObj.style.color = "red";
		return false;
	}else
	{
		divObj.innerHTML = "<img src='images/ok.gif' />";
		return true;
	}
}
function focus_userpwd()
{
	//获取id=result_userpwd的元素对象
	var divObj = document.getElementById("result_userpwd");
	//写入提示信息
	divObj.innerHTML = "请输入你的密码";
	divObj.style.color = "#ccc";
}
function blur_userpwd()
{
	//获取name=username和id=result_userpwd的元素对象
	var inputObj = document.form1.userpwd;
	var divObj = document.getElementById("result_userpwd");
	//用户名验证
	if(document.form1.userpwd.value=="")
	{
		divObj.innerHTML = "对不起，密码不能为空！";
		divObj.style.color = "red";
		return false;
	}else if(document.form1.userpwd.value.length<5 || document.form1.userpwd.value.length>20)
	{
		divObj.innerHTML = "密码长度必须介于5-20个字符之间！";
		divObj.style.color = "red";
		return false;
	}else
	{
		divObj.innerHTML = "<img src='images/ok.gif' />";
		return true;
	}
}
function checkForm()
{
	var flag_username = blur_username();
	var flag_userpwd = blur_userpwd();
	if(flag_username && flag_userpwd)
	{
		//提交表单
		return true;
	}else
	{
		//阻止表单提交
		return false;
	}
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php" οnsubmit="return checkForm()">
<table width="600" border="1" bordercolor="#ccc" rules="all" align="center" cellpadding="5">
	<tr>
		<th colspan="3" bgColor="#f0f0f0">用户登录</th>
	</tr>
	<tr>
		<td width="80" align="right">用户名：</td>
		<td><input type="text" name="username" οnfοcus="focus_username()" οnblur="blur_username()" /></td>
		<td width="350"><div id="result_username"></div></td>
	</tr>
	<tr>
		<td width="80" align="right">密码：</td>
		<td><input type="password" name="userpwd" οnfοcus="focus_userpwd()" οnblur="blur_userpwd()" /></td>
		<td><div id="result_userpwd"></div></td>
	</tr>
	<tr>
		<td> </td>
		<td colspan="2"><input type="submit" value="提交表单" /></td>
	</tr>
</table>
</form>


</body>
</html>