用JS对登录时提交的信息进行判断

最新推荐文章于 2024-07-13 17:56:15 发布

Hundecim

最新推荐文章于 2024-07-13 17:56:15 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/Hundecim/article/details/38591265

本文展示了一个使用JavaScript实现的登录信息验证示例，通过检查用户名是否为空以及密码长度是否小于三位，为用户提供实时反馈，确保输入的有效性。

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

<span style="font-family: Arial, Helvetica, sans-serif;">利用JS可以对用户登录时输入的信息进行初步判断，如有不符合格式的情况给予相应的提示。</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;">以下是代码示例 ，判断条件为用户名不能为空，密码必能少于三位</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><html xmlns="http://www.w3.org/1999/xhtml"></span>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS示例</title>
<style type="text/css">
	table{
		margin:0 auto;	
	}
</style>

<script type="text/javascript">
	function validateFrom(){
		//alert("Hello World!");
		var nameText=document.getElementById("name").value;
		var pwd=document.getElementById("pwd").value;
		if(nameText==""||nameText.length==0){
			alert("用户名不能为空！");
			return false;
		}else if(pwd.length<3){
			alert("密码太短或为空！");
			return false;
		}
			return true;
	}


</script>

</head>

<body>
	<form action="test-1.html" method="post" onsubmit="return validateFrom()">
	<table>
    	<tr>
        	<td>用户名：</td>
            <td><input type="text" id="name" name="name"/></td>
        </tr>
        <tr>
        	<td>密码：</td>
            <td><input type="password" id="pwd" name="pwd"/></td>
        </tr>
        <tr>
        	<td><input type="submit" value="提交"/></td>
            <td><input type="reset" value="重置"/></td>
        </tr>
    </table>
    </form>
</body>
</html>