Question

我正在使用语义ui，并尝试使用它进行某种形式的验证。

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

但是我不确定如何使用语义UI对此做规则。

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

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

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

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

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。

仅当选择了选项时，语义UI表单规则

1 个答案: