向使用 Serenity 模板的 ASP.NET 应用程序添加字段验证

Question

我目前正在开发一个使用 Visual Studio 中的 Serenity 模板 (Serene) 的基本 CRUD Web 应用程序。此模板提供对多个插件的访问。 Sergen 插件生成为指定数据库创建 CRUD 表的 c# 和 html 文件。 jQuery 验证插件用于修改客户端字段验证。我正在尝试通过将以下 jQuery 和正则表达式（注释部分）组合添加到 TableIndex.cshtml 文件（由 Sergen 生成）中来向频率输入字段添加自定义字段验证：

{
ViewData["Title"] = Serenity.LocalText.Get("Db.Default.Table.EntityPlural");
}

<div id="GridDiv"></div>


<script type="text/javascript">
jQuery(function () {
    new SerenityNowSolution.Default.TableGrid($('#GridDiv'), {}).init();

    Q.initFullHeightGridPage($('#GridDiv'));
});

//The following is code that I added:

$(document).ready(function () {
    $.validator.addMethod("TableDialog1_Frequency", function (value, element) {
        return this.optional(element) || /(\d)+(d|h|m|s)/.test(value);
    }, "Frequency is invalid: Please enter a valid frequency.");

    $("#TableDialog1_Form").validate({
        rules: {
            TableDialog1_Frequency: "required TableDialog1_Frequency",
        },
    });
});

</script>

据我所知，这是 Sergen 生成的唯一 cshtml 文件。我添加自定义字段验证的尝试遇到了一些问题：

1. 我不确定我添加的代码的位置（如果这是要编辑的正确文件）。

2. 我添加的代码目前尝试通过向 validate 插件中的验证器函数添加正则表达式规则（方法）来向频率输入字段添加验证。不幸的是，Sergen 生成的代码“自动创建”（由于缺乏更好的描述）包含频率输入字段（id = TableDialog#_Frequency）的添加行模式（id = TableDialog#_Form）。在我上面的代码中，我尝试将字段验证添加到特定模式的输入字段（表单/频率＃1）。但是，每次在网页上单击添加行按钮时，出现的模式都会在其 id 中具有唯一的标识号。看来我需要编辑模态生成代码以删除这些数字，或者修改我的验证代码来解决这个问题。我也不确定该怎么做。

以下代码用于生成添加行模式（TableDialog#_Form）：

namespace SerenityNowSolution.Default {

@Serenity.Decorators.registerClass()
export class TableDialog extends Serenity.EntityDialog<TableRow, any> {
    protected getFormKey() { return TableForm.formKey; }
    protected getIdProperty() { return TableRow.idProperty; }
    protected getLocalTextPrefix() { return TableRow.localTextPrefix; }
    protected getNameProperty() { return TableRow.nameProperty; }
    protected getService() { return TableService.baseUrl; }

    protected form = new TableForm(this.idPrefix);

}
}

感谢您抽出宝贵时间阅读本文。如果我应该显示任何其他代码，请告诉我。任何帮助将不胜感激。

更新：

这是我目前添加的代码（在进行了建议的更改之后）：

$(document).ready(function () {
    $.validator.addMethod(
        "regex",
        function (value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
    );
});

$(document).on('click', '.tool-button.save-and-close-button', function () {
    var item = $("div.field.Frequency input").attr("id");
    var abc = $("div.s-Form form").attr("id");
    $(abc).validate();
    $(item).rules("add", {
        regex: "^(\d)+(d|h|m|s)$"
    });
    $(abc).validate();
});

$(document).on('click', '.tool-button.apply-changes-button.no-text', function () {
    var item = $("div.field.Frequency input").attr("id");
    var abc = $("div.s-Form form").attr("id");
    $(abc).validate();
    $(item).rules("add", {
        regex: "^(\d)+(d|h|m|s)$"
    });
    $(abc).validate();
});

很遗憾，字段验证仍未进行。

Answer 1

假设您的方法的其余部分是正确的，那么您已经错误地构造了 rules 对象。

$("#TableDialog1_Form").validate({
    rules: {
        TableDialog1_Frequency: "required TableDialog1_Frequency",
    },
});

当有多个规则时，您不能使用此速记列出规则。还不清楚您似乎在字段和规则上使用了相同的名称？

像这样对method: parameter 使用key: value 对...

$("#TableDialog1_Form").validate({
    rules: {
        field_name: {  // <- NAME of the field here
            required: true,
            TableDialog1_Frequency: true
        },
        another_field_name: {
            // rules for this field
        }, 
        // remaining fields
    },
    // other validate options, etc.
});

但是，每次在网页上单击添加行按钮时，出现的模式都会在其 id 中具有唯一的标识号。看来我需要编辑模态生成代码以删除这些数字，或者修改我的验证代码来解决这个问题。我不确定该怎么做。

如果您无法控制或预先了解动态生成的字段将如何命名，那么您必须使用.rules() 方法在生成字段时以编程方式添加规则。

例如here 和here。

如果这不切实际，那么您可以简单地使用required 和TableDialog1_Frequency 作为字段上的类，jQuery Validate 插件会自动选择它们。这种方法最适用于具有布尔参数的规则。

<input name="foo234" type="text" class="required TableDialog1_Frequency" ....

name 无关紧要，只要：

• 该字段包含name
• name 对form 来说是独特的

---

我也质疑您为自定义方法命名的选择。如果规则将输入验证为时间格式，那么也许应该将其命名为更通用的名称，例如time。自定义规则可用于无限数量的字段。