表单验证

最新推荐文章于 2024-04-16 11:57:14 发布

javaScript小主

最新推荐文章于 2024-04-16 11:57:14 发布

阅读量63

点赞数 1

本文链接：https://blog.csdn.net/qq_45683093/article/details/103225735

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<style>
			.star{background-color: red;}
		</style>
		<form>
			<h3 align="center">用户注册</h3>
			<div class="dt">用户名:<input type="text" id="username" name="username" size=20 class="required"></div>
			<div class="dt">密&nbsp;&nbsp;码:<input type="password" id="pwd" name="pwd" size=20 class="required"></div>
			<div class="dt">性&nbsp;&nbsp;别:<input type="text" id="sex" name="sex" size=4 maxlength=3 /></div>
			<div class="dt">年&nbsp;&nbsp;龄:<input type="text" id="age" name="age" size=4 maxlength=3 /></div>
			<div class="dt"><input type="submit" name="sub" value="注册" /></div>
		</form>
		<script>
			$(function(){
				$("form :input.required").each(function(){
					var $required=$("<strong class='star'>*</strong>");          //创建元素
					$(this).parent().append($required);                          //将其追加到文档中
				})
				$("form :input").blur(function(){
					if($(this).is("#username")){                        //判断元素id是否为用户名的文本框
						if($(this).val()==""){                          //判断用户名是否为空
							alert("用户名不能为空！");
						}
					}
					if($(this).is("#pwd")){                             //判断是否为密码框
						if($(this).val()==""){                          //判断密码是否为空
							alert("密码不能为空！");
						}
						if(this.value.length<8){                        //判断密码是否小于8位
							alert("密码不能小于8位，请重新输入！");
						}
					}
				})
			})
		</script>
	</body>
</html>

javaScript小主

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单验证

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单验证</title> <script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script> ...
复制链接

扫一扫

表单验证

“相关推荐”对你有帮助么？