语义 UI 表单验证 - 仅当值不为空时验证某些表单字段

2024-05-02

我有一个表单,其中包含必填字段和可选字段。我正在使用语义 UI 的表单验证行为来验证字段。

然而,我想要实现的是,表单验证行为仅在可选字段具有值时才验证可选字段。

可选字段示例:

<div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="First name">
</div>

必填字段示例:

<div class="required field">
    <label>E-mail address</label>
    <input type="text" name="email" placeholder="E-mail address">
</div>

我尝试省略empty验证规则,但这不起作用。

表单验证行为中是否有内置的东西可以帮助我实现这一目标,或者我是否需要为我的可选字段编写自定义验证?


Update:该功能现已在 1.2.0 版本中实现。相同optional可以使用标志:https://semantic-ui.com/behaviors/form.html#optional-fields https://semantic-ui.com/behaviors/form.html#optional-fields

语义版本

通过扩展语义 UI 表单验证行为,我设法为可选字段制定了一个可行的解决方案。

首先我添加了一个optional标志,每个规则集。这可以设置true or false:

firstname: {
    identifier: "first_name",
    optional: true,
    rules: [
        {
            type: "regex[^[a-zA-Z -]+$]",
            prompt: "First name can only consist of letters, spaces and dashes"
        }
    ]
}

然后,我搜索了处理每个字段验证的函数,并通过添加 if 语句来检查是否optional标志设置为true并且该值为空。如果条件为真,则跳过对空字段的验证并返回有效字段。

该函数可以在未压缩的 4600ish 行左右找到semantic.js或者搜索函数注释:

// takes a validation object and returns whether field passes validation
field: function(field) {
    var
        $field      = module.get.field(field.identifier),
        fieldValid  = true,
        fieldErrors = []
    ;

    if(field.optional && $.trim($field.val()) == ""){
        module.debug("Field is optional and empty. Skipping", field.identifier);
        return true;
    }
    if(field.rules !== undefined) {
        $.each(field.rules, function(index, rule) {
            if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) {
                module.debug('Field is invalid', field.identifier, rule.type);
                fieldErrors.push(rule.prompt);
                fieldValid = false;
            }
        });
    }
    if(fieldValid) {
        module.remove.prompt(field, fieldErrors);
        $.proxy(settings.onValid, $field)();
    }
    else {
        formErrors = formErrors.concat(fieldErrors);
        module.add.prompt(field.identifier, fieldErrors);
        $.proxy(settings.onInvalid, $field)(fieldErrors);
        return false;
    }
    return true;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

语义 UI 表单验证 - 仅当值不为空时验证某些表单字段 的相关文章