使用jQuery进行输入验证

Input validation using jQuery

本文关键字：输入 验证 jQuery 使用      更新时间：2023-12-16

我正在编写一个MVC 5互联网应用程序，我有一个想要实现自定义验证的视图。

我有以下HTML元素：

<div class="form-group">
    <label class="control-label col-md-2" for="txtCvc">Cvc</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
    </div>
</div>

如何在jQuery中将此HTML元素标记为无效？

我正在寻找的效果是：

<div class="form-group">
    <label class="control-label col-md-2" for="txtCvc">Cvc</label>
    <div class="col-md-10">
        <input class="input-validation-error form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
        <span class="field-validation-error" data-valmsg-for="test" data-valmsg-replace="true">Test error.</span>
    </div>
</div>

实现这一目标的最佳方式是什么？是否需要手动将"input-validation-error"添加到id="txtCvc"，然后手动添加span class="field-validation-error"？

有更简单/更好的方法吗？我不是jQuery的常客。

没有HTML元素的模型，我希望使用此验证，并且不能使用模型。该代码与帖子中的第一个代码完全相同。

我只想显示HTML元素的验证消息，并在输入元素周围显示红色容器轮廓。我希望得到与jQuery/Javascript中有一个带有数据注释的模型（但没有模型）相同的结果。是否有jQuery库可以提供帮助？

提前谢谢。

document.validate（）使用

.field-validation-error {
    color: #b94a48;
    border: 1px solid #b94a48;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate({
  
errorClass:'field-validation-error'
});
</script>

   $('#myForm').validate({ 
       errorClass:'myClass'   //your options 
    });

jquery验证/自定义css

您可以在Model属性中设置Required Attribute，然后在此处使用此模型。示例

型号

公共类LoginModel｛
[必需]
公共字符串TxtCvc｛get；set；｝
}

在您的视图中
@模型登录模型
@Html.TextBoxFor（x=>x.TxtCvc）

相关文章：