【JavaScript】表单验证

最新推荐文章于 2023-03-29 15:51:50 发布

1024A

最新推荐文章于 2023-03-29 15:51:50 发布

阅读量524

点赞数

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

本文链接：https://blog.csdn.net/qq_58309844/article/details/126148492

版权

用js实现对表单中输入的内容进行验证并提示

摘要由CSDN通过智能技术生成

用js实现对表单中输入的内容进行验证并提示

文章目录

一、表单验证
二、展现效果

一、表单验证

1.html代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="wrapper">
			<form action="#" method="get">
				<div>
					<label>名字:&nbsp;</label>
					<input type="text" id="uname" required>
					<span id="unameInfo"></span>
				</div>
				<div>
					<label>姓氏:&nbsp;</label>
					<input type="text" id="familyn" required>
					<span id="familynInfo"></span>
				</div>
				<div>
					<label>登录名:&nbsp;</label>
					<input type="text" id="loginm" required>
					<span id="prompt"></span>
					<span id="loginmInfo"></span>
				</div>
				<div>
					<label>密码:&nbsp;</label>
					<input type="password" id="pwd" required>
					<span id="prompt"></span>
					<span id="pwdInfo"></span>
				</div>
				<div>
					<label>再次输入密码:&nbsp;</label>
					<input type="password" id="repwd" required>
					<span id="repwdInfo"></span>
				</div>
				<div>
					<label>电子邮箱:&nbsp;</label>
					<input type="text" id="email" required>
					<span id="prompt"></span>
					<span id="emailInfo"></span>