使用 jQuery 进行输入验证

Question

我正在编写一个 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>

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

我要的效果是这样的：

<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" 吗？

有没有 easier/better 方法来做到这一点？我不是 jQuery.

的普通用户

HTML 元素没有我希望对其使用此验证的模型，并且无法使用模型。该代码与 post.

中的第一个代码完全相同

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

提前致谢。

Answer 1

您可以在模型中设置必需属性属性，然后在此处使用该模型。例子

型号

public class 登录模型{
[必填]
public 字符串 TxtCvc{get;set;}
}

在您看来
@model 登录模型
@Html.TextBoxFor(x=>x.TxtCvc)

Answer 2

文档.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-validation/custom css

使用 jQuery 进行输入验证

Input validation using jQuery

html

javascript

validation

jquery

input