Javascript 如何在文本字段中显示基本验证消息

我想在需要验证的文本字段下面显示验证消息，以及我找到的图像中的示例

示例

我的表单上有以下文本字段，它们各自的验证在Javascript中完成

//验证票据表单的函数
函数validate_form（）{
有效=真；
if（document.ticketForm.matricula.value==“”）{
警报（“再次验证数据，输入车牌”）；
有效=错误；
}
if（document.ticketForm.nombre.value==“”）{
警报（“再次验证数据，输入申请人姓名”）；
有效=错误；
}
返回有效；
}

许可证：
全名：
电邮：
发送

要在字段下显示验证消息，您需要一个元素来显示它

它可以是任何div，span或任何你想要的

在我的示例中，我将使用一个跨度来演示其工作原理：

<input onchange="validate();" type="text" class="validateable" validation-pattern="[0-9]*" />
    <div class="validation-message">Only numbers are allowed in this field!</div>

css仅在无效时显示验证文本：

.validation-message {
  display: none;
}

input.validateable.invalid + .validation-message{
  display: block;
  color: red;
}

此代码的作用：

JS函数查找类为“validatable”的每个输入，并对其进行迭代。每个元素都应该有一个带有验证模式的属性

validation pattern=“[0-9]*”

现在函数检查输入的值是否与模式匹配，并向输入添加一个类

invalid

，或将其删除。 在css中，我定义了一个不可见的div

验证消息

，但如果元素bevor this div是一个可验证的输入字段，则该字段无效，将显示div，您可以看到验证消息

工作小提琴：

更新：

在您的情况下，您只想验证您正在更改的字段，请查看我的已更改示例fidle：

更新2:

A尝试修复代码段，假设字段的值不为空时有效，如果值为空则无效：

功能验证（字段）{
常量输入=字段；
如果（！input.value | | input.value.length==0）{
input.classList.add（'invalid'）；
}否则{
input.classList.remove（'invalid'）；
}
}

输入{
显示：块；
}
.验证消息{
显示：无；
}
input.validateable.invalid+验证消息{
显示：块；
颜色：红色；
}

马特里库拉：
新评估信息验证，进入矩阵
名称：completo：
核实新评估中的信息，Ingree el-nombre

完成这项任务有无数种方法。动态或硬编码字段、javascript或服务器端处理。。。请更具体地说明您希望如何完成此任务。同样重要的是，在比较值时，使用<代码>＝＝/COD>比较值>文件（文件。TigCut.StutoStudio Value=＝=）“{ } /Cult>添加一个SUN或其他元素Unter您的文本框并添加您的消息，当验证您可以使用MODE，隐藏它PAR默认值，并且当您需要用户纠正IfOS时显示它。（将模式“显示从无切换到块”的属性）@JarlikStepsto你能告诉我文本中应该使用的元素吗box@daddygames我将再次考虑价值对比问题我刚刚更新了我开始打字时发生的情况刚刚更新了我的提琴以验证字段，该字段目前正在更改

.validation-message {
  display: none;
}

input.validateable.invalid + .validation-message{
  display: block;
  color: red;
}