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

时间:2018-07-19 15:13:32

标签: jquery asp.net jquery-validate

我目前正在使用在Visual Studio中使用Serenity模板(Serene)的基本CRUD Web应用程序。该模板提供对多个插件的访问。 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. 我添加的代码当前试图通过向验证插件中的验证器函数添加正则表达式规则(方法)来向频率输入字段添加验证。不幸的是,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();
});

不幸的是,仍然没有进行字段验证。

1 个答案:

答案 0 :(得分:0)

假设其余方法正确,则您构造的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()方法以编程方式添加规则。

示例herehere

如果这不切实际,那么您可以简单地使用requiredTableDialog1_Frequency作为该字段上的类,而jQuery Validate插件将自动选择这些类。这种方法最适合具有布尔参数的规则。

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

name无关紧要,只要:

  • 该字段包含一个name
  • nameform
  • 唯一

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