JQuery HTML5 验证表单

Dear 丶 2023-10-18 13:42 130阅读 0赞

**HTML5****新增属性验证表单内容**

**![20190111170557509.png][]**

效果：

![20190111170758821.png][]![20190111170809634.png][]

说明：提示原来的HMTL5自带的消息哦！

**使用****validity****属性进行表单验证提示：可以自定义消息哦！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

页面：

<body>
    		<form action="#" method="post">
    			<p>tel:<input type="text" name="tel" required="required" id="tel" maxlength="11" size="25" placeholder="请输入手机号13，18，19开头的号" pattern="1[389]\d{9}" />
    				
    			<p>age:<input type="text" name="age" id="age" value=""  required pattern="120|(1[0-1]|[1-9])?\d" />
    				</p>
    			<p>name:<input type="text" name="name" id="name" value="" maxlength="17" required="required"  pattern="[a-zA-Z][a-zA-Z0-9]{3,15}"/>
                 </p>
          
                <p>birthday:<input type="text" name="bir" id="bir" placeholder="输入出生年份" required="required" pattern="19\d{2}|20[0-1][0-6]"/>
    	      	</p>
    			<input type="submit" id="submit" name="" value="注册" />
    		</form>
    	</body>

$(function() {
    
    	$("#submit").click(function() {
    
    		//tel 注意：(1)不能jquery;(2)必须在input有required;
    		//			var tel = $("#tel");
    		//js DOM
    		var tel = document.getElementById("tel");
    
    		if(tel.validity.valueMissing == true) { //valueMissing 值的错误提示
    			tel.setCustomValidity("手机号码不能为空!");
    		} else if(tel.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
    			tel.setCustomValidity("手机号码必须是13,18,19开头的11位!");
    		} else { //清空
    			tel.setCustomValidity("");
    		}
    
    		//js DOM
    		var age = document.getElementById("age");
    
    		if(age.validity.valueMissing == true) { //valueMissing 值的错误提示
    			age.setCustomValidity("年龄不能为空!");
    		} else if(age.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
    			age.setCustomValidity("年龄必须是0-120!");
    		} else { //清空
    			age.setCustomValidity("");
    		}
    
    		//js DOM name
    		var name = document.getElementById("name");
    
    		if(name.validity.valueMissing == true) { //valueMissing 值的错误提示
    			name.setCustomValidity("姓名不能为空!");
    		} else if(name.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
    			name.setCustomValidity("姓名必须由英文字母和数字组成，用户名长度为4～16字符");
    		} else { //清空
    			name.setCustomValidity("");
    		}
    		
    		
    		
    
    	});
    
    });

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

总结：可以将上述的写的代码封装成函数，会更加简便！

//domName:DOM对象
    //domEmpty:未填写提示信息
    //domString:正则表达式错误
    function my(domName, domEmpty, domString) {
    	if(domName.validity.valueMissing == true) { //valueMissing 值的错误提示
    		domName.setCustomValidity(domEmpty);
    	} else if(domName.validity.patternMismatch == true) { //patternMismatch 正则表达式错误
    		domName.setCustomValidity(domString);
    	} else { //清空
    		domName.setCustomValidity("");
    	}
    
    }

调用方法：

//调用方法birthday
    		my(document.getElementById("bir"), "年份不能为空", "生日的年份为1900～2016");

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5][]

## 注意：获得DOM对象，不能用JQuery对象哦！要有提示必须在input里写required ##

[20190111170557509.png]: https://img-blog.csdnimg.cn/20190111170557509.png
[20190111170758821.png]: https://img-blog.csdnimg.cn/20190111170758821.png
[20190111170809634.png]: https://img-blog.csdnimg.cn/20190111170809634.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190111171050261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190111171101226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190111171414482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190111171426644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019011117183563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190111171850279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70