JS实现简单的表单验证01

最新推荐文章于 2026-04-16 19:04:30 发布

原创最新推荐文章于 2026-04-16 19:04:30 发布 · 658 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JS 专栏收录该内容

14 篇文章

订阅专栏

JS实现简单的表单验证01

一、步骤分析:

1、设计表单页面form

2、在表单标签中增加一个事件 onclick=“checkForm”

3、编写checkForm方法,

4、分别通过getElementByID获得指定信息并进行判断是否为空

5、为空则发出提示并返回错误。

二、代码练习：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script>
function checkForm(){
//获取用户名信息
var usna=document.getElementById("username");
//判断信息
if(usna==null || usna=="")
{
alert("用户名不能为空");
}
//获取密码信息
var psw=document.getElementById("password");
//判断密码是否为空
if(psw==null||psw=="")
{
alert("密码不能为空");
}
return false; //返回错误
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="checkForm()" >
用户<input type="text" id="username"/><br />
密码<input type="password" id="password" /><br />
<input type="submit" value="保存" /> <input type="reset" value="重置" />
</form>
</body>
</html>