javascript - 基于条件所需的表单元素 (Happy.js)

Question

我正在尝试使用 Happy.js 在客户端验证表单。

基本验证工作正常，但我有一个稍微复杂的部分，我需要验证它有点复杂。本质上，有一个是/否单选框，如果是，则显示更多输入标签。仅当单选按钮为是时才需要这些标签，否则不需要。

有没有人对如何做到这一点有任何建议？我正在考虑将它们设置为非必需的，然后创建一个快乐的函数，如果输入为空并且单选按钮设置为是，它将返回 false。

像这样:

"#input":{
    required: false,
    message: "required",
    test: happy.needed(parameter)
}

谢谢。

Answer 1

正如文档所说，您可以将 'sometimes' 传递给 required，这将使 Happy 始终运行测试功能。

对于测试函数，我们只是返回jQuery/Zepto的值is。

"#input":{
    required: "sometimes",
    message: "Custom message",
    test: function(input){ 
      return $(input).val() !== '' && $('#radioButton').is(':checked');
    }
}

如果您不确定发生了什么，他们给 happy.email 的示例可能会造成混淆。 JavaScript 中的函数是一流的，这意味着您可以像变量一样传递它们。

所以如果我们要写:

var isRadioButtonChecked = function(input) {
  return $(input).val() !== '' && $('#radioButton').is(':checked');
}

然后在我们的验证规则中我们可以写:

"#input":{
    required: "sometimes",
    message: "Custom message",
    test: isRadioButtonChecked
}

这样会更简洁一些。