html5表单验证_setcustomvalidity pattern

作者：从前慢现在也慢 | 2024-02-18 21:55:11

踩

setcustomvalidity pattern

h5新增的表单验证都存在了ValidityState对象中,该对象是通过validity 属性获取的，
该对象有11个属性;
1．valueMissing属性
必填的表单元素的值为空。对应required
2．typeMismatch属性
输入值与type类型不匹配,如email、number、url等
3．patternMismatch属性
输入值与pattern特性的正则不匹配。
4．tooLong,tooShort属性
对应字符长度maxlength,minlength
5．rangeUnderflow属性
输入的值小于min特性的值。
6. rangeOverflow属性
输入的值大于max特性的值。
7．stepMismatch属性
输入的值不符合step特性所推算出的规则。
8．customError属性
使用自定义的验证错误提示信息。
有时候，不太适合使用浏览器内置的验证错误提示信息，需要自己定义。当输入值不符合语义规则时，会提示自定义的错误提示信息。
通常使用setCustomValidity()方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，
此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。
9.valid
当前输入是否有效
10.badInput
输入无效，如number框输入abc
另外:
checkValidity方法用来检测表单或元素的输入是否有效。

input的一些属性方法:
pattern：规定用于验证输入字段的正则表达式。
oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发oninvalid事件。oninvalid属于Form 事件。
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
maxlength：限定input最大输入长度
oninput：该事件在 input 或 textarea 元素的值发生改变时触发。
novalidate=“novalidate” 禁用验证.作用于表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>


<body>
		<form >

			<p><label for="runnername">Runner:</label>
				<input id="runnername" name="runnername" type="text" />
			</p>
			<!--html5自带的验证 -->
			<p>姓名：<label><input type="text" name=""  required="required" pattern="[\u4e00-\u9fa5]{2,4}" placeholder="请输入姓名" oninvalid="setCustomValidity('真实姓名必须是中文，且长度不小于2，不大于4')"  oninput="setCustomValidity('')"></label></p>
			<p>密码：<label><input type="password" name="" required="required" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="请输入密码" oninvalid="setCustomValidity('6~20字母数字或下划线')"  oninput="setCustomValidity('')"></label></p>
			<p>身份证号：<label><input type="text" name="" required="required" pattern="^([0-9]){18}(x|X)?$" placeholder="请输入身份证号" oninvalid="setCustomValidity('请输入正确的身份证号码')" maxlength="18" oninput="setCustomValidity('')"></label></p>
			<p>手机号码：<label><input type="tel" name="" required="required" maxlength="11"  pattern="^(0|86|17951)?1[0-9]{10}" placeholder="请输入手机号" oninvalid="setCustomValidity('请输入11位手机号码')" oninput="setCustomValidity('')"></label></p>
			<!--multiple,支持输入多个邮箱,用逗号分隔;-->
			<p>邮箱：<label><input type="email" name="" required="required"  multiple="multiple"  placeholder="请输入邮箱" ></label></p>
			<p>时间：<label><input type="date" name="" required="required"  pattern="" placeholder="请输入时间" ></label></p>
			<p>网址：<label><input type="url" name="" required="required"  pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" placeholder="请输入网址" ></label></p>
			自动获取焦点: <input type="text" name="user_name" autofocus="autofocus" /><br />
			<input type="submit" name="提交">
		</form>
		
		<br /><br /><br /><br />
		
	<form >
		minlength:<input type="text" minlength="2" maxlength="4" /><br />
	姓名1：<input type="text" name="name" required="required" placeholder="请输入姓名" pattern="[\u4e00-\u9fa5]{2,5}" />
	<br />
	<!--如果想自定义错误的提示语,使用oninvalid="setCustomValidity('姓名需为中文');"
	    	但是这种,如果自定了提示语,那么非空验证也会是这个提示语,且及时验证通过,设置的提示语不会主动情况,所以需要手动清除错误信息
	    	才能保证校验通过;
	    -->
	姓名2：<input   type="text" name="name" required="required" placeholder="请输入姓名" pattern="[\u4e00-\u9fa5]{2,5}" oninvalid="setCustomValidity('请输入中文2-5位');" oninput="setCustomValidity('')" />
	<!--改进-->
	<br /> 姓名3：<input type="text" name="name" required="required" placeholder="请输入姓名" pattern="[\u4e00-\u9fa5]{2,5}" oninvalid="checkName(this);" />
	<!--自定义方法验证-->
	<br />年龄：<input type="number" id="age" name="age" value="10" onblur="checkAge()" />
	<br /><input type="submit" />
</form>
		
		<script>
			function checkAge () {
				var age= document.getElementById("age");
				if(age.value==''){
					alert('请输入数字!');
					return false;
				}else if(!age.checkValidity()){
					alert('请输入合法数字');
					return false;
				}
			}
			
			function checkName(inputelement) {
		
		    console.log(inputelement.validity);
		    
		    //这个可以看做通用判断属性,无论什么属性,只有不符合条件,就false
//           alert(inputelement.validity.valid);
 
		    //非空判断
//		    if(inputelement.value==''){
//		    	inputelement.setCustomValidity('请输入中文!');
//		    	return;
//		    }else{
//		    	inputelement.setCustomValidity("");
//		    	return;
//		    }
		    //或者使用非空属性判断,这个时候需要input设置了required属性才行
//		    if(inputelement.validity.valueMissing){
//		    	inputelement.setCustomValidity('请输入中文!');
//		    }
			
			//使用具体的属性,非空判断可以用自带的判断,不需要自已写
			if(inputelement.validity.patternMismatch) {
				inputelement.setCustomValidity('请输入中文2-5位');
			} else {
				inputelement.setCustomValidity("");
				return true;
			}
		}
		</script>
	</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

参考:
https://www.imooc.com/article/17449

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/110804?site