代码之家 › 专栏 › 技术社区 › Simon

使用jQuery进行输入验证

input validation html jquery javascript

Simon · 技术社区 · 11 年前

我正在编写一个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库可以提供帮助?

提前感谢。

2 回复 | 直到 11 年前

Community Mohan Dere 9 年前

文件 .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

Vinod Kumar 11 年前

您可以在模型属性中设置Required属性,然后在此处使用此模型。实例

模型

公共类LoginModel{
[必需]
公共字符串TxtCvc{get;set;}
}

在您的视图中
@模型LoginModel
@Html.TextBoxFor(x=>x.TxtCvc)

推荐文章

Dónal · Spring Boot应用程序中的伪造证明文件类型验证

1 年前

David · 何时实际应用字符编码?

1 年前

Felix Cartwright · 为什么在我的JSON模式中没有遵守必填字段?

1 年前

Todd · 创建Powershell脚本,检查.csv文件中每行是否有两个字符串和一个整数

1 年前

Qiuzman · 如何确保v-combobox中的所有项目都遵循规则

1 年前

Kojrey · 在Python中,为什么这个负浮点数会传递非负while循环测试条件?

1 年前

DevilsThumb · 赋值时的Pydantic类型转换

1 年前

TinyTiger · 使用Zod验证Vee-validate:在Vue 3 Composition API中模糊上未显示自定义错误消息

2 年前

Amber Chambers · Google Sheets-导入范围问题并构建一个公式,该公式既导入范围,又基于另一列中的相应数据验证

2 年前

Chenomorfo · 忽略下拉渲染选择项中的输入项-AntDesign

2 年前