3-14表单的验证提交会没有我写的判断里面的条件
来源：3-14 html约束验证API之setCustomValidity综合案例
qq_顺其自然_67
2018-07-16 10:47:45
3-14表单的验证提交会没有我写的判断里面的条件,是否为空，是否还是四个数字，直接提交成功了,输入数据，会打印数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" >
<title>联系</title>
</head>
<style type="text/css">
input[type="text"] {
border:1px solid #ccc;
width:150px;
height:30px;
border-radius:5px;/*css3的圆角属性*/
}
input[type="submit"] {
border:1px solid #ddd;
width:60px;
height:33px;
background-color:#eee;
}
</style>
<body>
<form name="text" action="" method="post">
<input type="text" required="required" parent="^\d{4}$" placeholder="请输入代码" oninput="checkit(this)" />
<input type="submit" value="验证" />
</form>
<script>
function checkit(obj){
/*if(obj.value == "" && obj.value == null){
alert("不允许输入内容为空")
}else{
alert("输入正确");
}*/
console.log(obj.validity);
var it = obj.validity;
if(true === it.valueMissing){
obj.setCustomValidity("不能为空");
}else{
if (true === it.patternMismatch){
obj.setCustomValidity("必须是4个数字!");
}else{
obj.setCustomValidity("");
}
}
}
</script>
</body>
</html>
2回答
-
测试了你的代码，这不是有你写的判断里面是否为空，是否为4位数字么？
patternMismatch根据表单控件上设置的格式规则验证输入是否为有效格式。用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性 后，只要输入控件的值不符合模式规则，patternMismatch就会返回true值。
valueMissing是确保表单控件中的值已填写。用法：在表单控件中将required特性设置为true。如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时valueMissing会返回true。
希望可以帮到你！
0 -
樱桃小胖子
2018-07-16
建议在本地浏览器测试效果更佳
祝学习愉快！
0h018-07-16
相似问题