使用 JQuery 验证 Razor 视图中的字段

Question

我正在尝试对 Razor 视图中的字段使用自定义 JQuery 验证，但我不知道如何将该字段与 JQuery 函数相关联，我使用过 JQuery 但来自 html 页面和表单，而不是使用 Razor 视图中的 HtmlHelpers 这是我要验证的字段（我在同一页面中引用了我需要的 JQuery .js）

  @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

我尝试在其中放入一个 id 并将 EditorFor 更改为 TextBoxFor，然后从我的 JQuery 函数中调用它，但没有成功

  @Html.TextBoxFor(model => model.Name, new { id="artistName", htmlAttributes = new { @class = "form-control" } })

这是我在 JQuery 中使用的函数，但我找不到如何将它绑定到 Html Helper：

$(document).ready(function () {
    $("#artistName").on("blur",function(){
        if ($(this).val().match('^[a-zA-Z]{3,16}$')) {
            alert("Valid name");
        }
        else {
            alert("That's not a name");
        }
    })
})

Answer 1

移除 id 属性并使用 $("#Name") 作为选择器。

@Html.TextBoxFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

           $("#Name").on("blur",function(){
               if ($(this).val().match('^[a-zA-Z]{3,16}$')) {
                   alert("Valid name");
               }
               else {
                   alert("That's not a name");
               }
           })

Answer 2

您是否绝对有必要使用 Javascript 进行验证？这些字段可以使用数据注释进行验证。请查看此DataAnnotations validation (Regular Expression) in asp.net mvc 4 - razor view

如果您绝对需要使用 jquery，请查看 Jquery 验证插件。 https://jqueryvalidation.org/documentation/