如何使用JavaScript验证输入字段

如果我有一个带有特定正则表达式模式属性的输入字段，是否有JavaScript/JQuery函数可以访问该输入DOM元素，并验证其中的当前值是否符合该模式？

您需要使用（检查“使用JavaScript验证表单”部分）它为每个已设置验证的字段提供一个

validity

对象。这个

validity

对象公开了一组“有效性约束”（HTML5本机提供的每种验证类型都有一个）

在您的情况下，您需要检查元素上的

有效性.patternmatch

，看看它是否无效。但是，当只对元素应用一种类型的验证时，

有效性。有效性就足够了

下面，我们有一个表单字段，它是必需的，并且为它设置了一个模式。在这种情况下，知道字段无效对于您的目的来说可能是不够的，因此代码不仅告诉您元素是否无效，而且表明您可以检查各个约束以了解原因

尝试不输入任何数据并单击提交按钮。这将告诉您元素无效，但如果您查看约束报告，您将看到在这种情况下
valueMissing=true
。然后尝试只输入几个字符，您仍然会看到它显示为无效，但在这种情况下会显示
patternmatch=true


var field=document.getElementById（“ss”）；
var btn=document.getElementById（“btnValidity”）；
btn.addEventListener（“单击”，函数（evt）{
console.clear（）；
//您可以使用valid属性测试简单有效性
日志（“字段有效吗？”+ss.validity.valid）；
//而且，您可以通过检查所有有效性约束来获得更具体的信息
//在这里，我们只是为了演示而循环整个集合
for（ss.validity中的var约束）{
if（ss.有效性[约束]）{
console.log（约束+“=”+ss.validity[constraint]）；
}
}
});
/*有效和无效元素可以使用CSS伪类实时显示其状态*/
输入[type=text]：活动，输入[type=text]：焦点{大纲：无；}
输入[类型=文本]：有效{框阴影：0 0 3px绿色；}
输入[类型=文本]：无效{框阴影：0 0 3px红色；}
SS#
检查有效性
您需要使用（检查“使用JavaScript验证表单”部分），该部分为每个已设置验证的字段提供一个
有效性
对象。这个
validity
对象公开了一组“有效性约束”（HTML5本机提供的每种验证类型都有一个）

在您的情况下，您需要检查元素上的
有效性.patternmatch
，看看它是否无效。但是，当只对元素应用一种类型的验证时，
有效性。有效性就足够了

下面，我们有一个表单字段，它是必需的，并且为它设置了一个模式。在这种情况下，知道字段无效对于您的目的来说可能是不够的，因此代码不仅告诉您元素是否无效，而且表明您可以检查各个约束以了解原因

尝试不输入任何数据并单击提交按钮。这将告诉您元素无效，但如果您查看约束报告，您将看到在这种情况下
valueMissing=true
。然后尝试只输入几个字符，您仍然会看到它显示为无效，但在这种情况下会显示
patternmatch=true


var field=document.getElementById（“ss”）；
var btn=document.getElementById（“btnValidity”）；
btn.addEventListener（“单击”，函数（evt）{
console.clear（）；
//您可以使用valid属性测试简单有效性
日志（“字段有效吗？”+ss.validity.valid）；
//而且，您可以通过检查所有有效性约束来获得更具体的信息
//在这里，我们只是为了演示而循环整个集合
for（ss.validity中的var约束）{
if（ss.有效性[约束]）{
console.log（约束+“=”+ss.validity[constraint]）；
}
}
});
/*有效和无效元素可以使用CSS伪类实时显示其状态*/
输入[type=text]：活动，输入[type=text]：焦点{大纲：无；}
输入[类型=文本]：有效{框阴影：0 0 3px绿色；}
输入[类型=文本]：无效{框阴影：0 0 3px红色；}
SS#
检查有效性
，将立即检查所有约束


console.log（document.getElementById（'a'）.checkValidity（））
console.log（document.getElementById（'b'）.checkValidity（））

，将立即检查所有约束


console.log（document.getElementById（'a'）.checkValidity（））
console.log（document.getElementById（'b'）.checkValidity（））


$（函数（）{
var$input=$（“#我的输入”）；
$input.on（'change'，函数（）{
var模式=$input.attr（'data-my-pattern-attr'）；
var regex=新的RegExp（模式“g”）；
if（$input.val（）.match（regex））{
log（'matches'）；
}否则{
console.log（“不匹配”）；
}
});
});


$（函数（）{
var$input=$（“#我的输入”）；
$input.on（'change'，函数（）{
var模式=$input.attr（'data-my-pattern-attr'）；
var regex=新的RegExp（模式“g”）；
if（$input.val（）.match（regex））{
log（'matches'）；
}否则{
console.log（“不匹配”）；
}
});
});

问题没有用JQuery标记。@ScottMarcus OP在问题中指定了“javascript/JQuery”。啊，没有看到。标题和问题仅用JavaScript标记。是的，没有问题：）当我可以使用html5模式属性时，为什么要使用自定义数据my pattern attr？问题不是标记