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

Question

我目前正在开发一个基本的CRUD Web应用程序，它使用Visual Studio中的Serenity模板（Serene）。此模板提供对多个插件的访问。 Sergen插件生成c＃和html文件，为指定的数据库创建CRUD表。 jQuery validate插件用于修改客户端字段验证。我试图通过将以下jQuery和regex组合（注释部分）添加到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）的add-row模式（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",
    },
});

当存在多个规则时，您无法使用此简写列出规则。还不清楚您是否在字段和规则上使用相同的名称？

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

$("#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更通用的东西。自定义规则可以在无限数量的字段上使用。