html5表单验证

Love The Way You Lie 2022-04-02 07:17 281阅读 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>