JavaScript验证表单用户名密码非空

最新推荐文章于 2022-09-24 00:59:12 发布

安静点DGC

最新推荐文章于 2022-09-24 00:59:12 发布

阅读量8.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_26925297/article/details/79888699

前端专栏收录该内容

10 篇文章

订阅专栏

本文展示了两种使用JavaScript进行表单验证的方法，确保用户名和密码字段不为空。当用户尝试提交表单时，如果输入为空，将弹出警告并阻止表单提交。示例包括通过getElementById获取值进行验证和通过表单名称属性进行验证。

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

示例1：

<body>

<form name="f1" id="f2" action="http://www.baidu.com" method="get" onsubmit="return check()">

<table>
<tr>
<td>Login</td>
<td><input type="text" name="username" id="username" ></td>
</tr>

<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" ></td>
</tr>

<tr>
<td colspan="2" ><input type="submit" ></td>
</tr>

</table>

</form>

</body>
<script type="text/javascript">

//提交之前进行检查，如果return false，则不允许提交
function check(){
//根据ID获取值
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username==""){
alert("用户名不能为空");
return false;

}
if(password==""){
alert("密码不能为空");
return false;
}
return true;

}

</script>

示例2：

<body>

<form name="f1" id="f2" action="http://www.baidu.com" method="get" onsubmit="return check()">

<table>
<tr>
<td>Login</td>
<td><input type="text" name="username" id="username" ></td>
</tr>

<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" ></td>
</tr>

<tr>
<td colspan="2" ><input type="submit" ></td>
</tr>

</table>

</form>

</body>
<script type="text/javascript">

//提交之前进行检查，如果return false，则不允许提交
function check(){

if(f1.username==null||f1.username.value==""){
alert("用户名不能为空");
return false;
}
if(f1.password==null||f1.password.value==""){
alert("密码不能为空");
return false;
}
return true;

}

</script>

结果如下图