Semantic-ui 表单规则仅在选择选项时

Question

我正在使用语义 ui 并尝试使用它进行一些表单验证。

我的场景是用户有 2 个选项：电子邮件或电话应用程序验证。他们选择其中一个选项并在文本字段中输入任何内容，然后单击提交。

但是我不确定如何使用语义 UI 对此进行规则处理。

我知道如果我想检查它是否为空白，我可以这样做：

$('.ui.form')
  .form({
    fields: {
      CODE: {
        identifier: 'code',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter your verification code'
          }
        ]
      }  
    } } );

但是，我想根据选择的选项添加其他规则。我有 javascript，目前告诉我选择的值，并在更改时更新。不确定如何将其添加到规则中，这样我就可以像 -- 如果选择了电话，则必须恰好是 6 个字符长，或者如果选择了电子邮件，则必须是 18 个字符长（不同选项的长度不同）。

有没有办法有这样的条件规则？我能找到的壁橱是：

depends: 'id'

检查以确保它不为空。

有谁知道如何基于另一个表单元素来制定诸如此类的条件规则？我正在使用最新版本的 Semantic-UI

Answer 1

您可以通过adding custom rules 进行操作。

$.fn.form.settings.rules.atLeastOne = function (value, fields) {
    fieldsToCompare = fields.split(",")
    if (value) {
        // current input is not empty
        return true
    } else {
        // check the other input field(s)
        // atLeastOne is not empty
        atLeastOne = false
        for (i = 0; i < fieldsToCompare.length; i++) {
            // gets input based on id
            if ($("#" + fieldsToCompare[i]).val()) {
                atLeastOne = true
            }
        }
        return atLeastOne
    }
}

$(".ui.form").form({
    fields: {
        number:{
            identifier: "number",
            rules: [{
                type: "exactLength[6]",
                prompt: "number has to be 6 chars long"
            }, {
                // include the input fields to check atLeastOne[email, address, ...]
                type: "atLeastOne[email]",
                prompt: "Please provide an email or a number"
            }]
        },
        email: {
            identifier: "email",
            rules: [{
                type: "exactLength[18]",
                prompt: "email has to be 18 chars long"
            }, {
                type: "atLeastOne[number]",
                prompt: "Please provide an email or a number"
            }]
        }
    }
});

请注意，该函数使用输入 id 作为标识符，而不是输入名称。您可能还想查看optional fields。