html5表单验证

最新推荐文章于 2024-03-23 13:17:33 发布

采采茶

最新推荐文章于 2024-03-23 13:17:33 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44251024/article/details/85252326

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证</title>
	</head>
	<body>
		<form action="" method="post">
			<p><label for="name">姓名：</label><input id="username"  type="text"  required placeholder="姓名为2-4个中文字符_" name="name" pattern="^[\u4e00-\u9fa5]{2,4}$"/></p>
			<p><label for="pwd">密码：</label><input id="pwd" type="password"  required  placeholder="密码为6-14个字母数字_" pattern="^\w{6,14}$" name="pwd"/></p>
			<p><label for="phone">手机号：</label><input id="phone" type="text" pattern="^\d{11}$"  placeholder="手机号为11位数字" name="phone"/></p>
			<p><label for="email">邮箱：</label><input id="email" type="email"  name="email"/></p>
			<p><label for="age">年龄：</label><input id="age" type="number" placeholder="年龄为1-130（岁）" name="age"/></p>
			<p><label for="weight">体重：</label><input id="weight" type="range" placeholder="体重范围0-400（公斤）" name="weight"/></p>
			<p><input type="submit" value="提交" name="confirm" id="confirm"/></p>
		</form>
	</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" >
	
	$(function(){
		//$("input[name ='name']").attr("pattern","^[\u4e00-\u9fa5]{2,4}$");
		$("#confirm").click(function(){
			var uname = document.getElementById("username");
			if (uname.validity.valueMissing == true){
				uname.setCustomValidity("姓名不能为空");
			}else if (uname.validity.patternMismatch == true){
				uname.setCustomValidity("姓名为2-4个中文字符");
			}else{
				uname.setCustomValidity("");
			}
			var pwd = document.getElementById("pwd");
			if (pwd.validity.valueMissing == true){
				pwd.setCustomValidity("密码不能为空");
			}else if (pwd.validity.patternMismatch == true){
				pwd.setCustomValidity("密码为6-14个字母数字_");
			}else{
				pwd.setCustomValidity("");
			}
			var email = document.getElementById("email");
			if (pwd.validity.typeMismatch){
				email.setCustomValidity("邮箱格式不正确");
			}else{
				email.setCustomValidity("");
			}
			var phone = document.getElementById("phone");
			if (phone.validity.patternMismatch){
				phone.setCustomValidity("手机号为11位数字");
			}else{
				phone.setCustomValidity("");
			}	
		})
	})
	
</script>

采采茶

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;表单验证&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="" me
复制链接

扫一扫