如何:使用数据属性进行条件验证

Question

使用jQuery Validate，我正在对select和text字段进行条件验证：如果从选择字段(#job(中选择特定选项(<option value="doctor">(，则必须填写文本字段(#specialization

(

到目前为止一切顺利，这里有一个工作副本：https://jsfiddle.net/vzx9paxz/2/

现在，我不喜欢弄乱太多的JS代码，我想利用data-rule-required属性。所以，我想直接在 HTML 代码中评估表达式($('#job').val() === 'doctor')，将其从 Javascript 中删除：如果它返回 true ，则必须填充#specialization字段，否则它可以为空

像这样：

<input type="text" data-rule-required="return ($('#job').val() === 'doctor')" class="form-control" id="specialization" name="specialization">

当然，这段代码不起作用：我尝试了其他表达式，例如javascript:return ($('#job').val() === 'doctor')但根本没有运气......

Answer 1

如何：使用数据属性进行条件验证

你不能。

---

data-rule-required="return ($('#job').val() === 'doctor')"

即使你可以在data属性中执行JavaScript，而你不能，jQuery Validify插件也无法解释它(请参阅控制台中的JS错误(。 通常，它会在data-rule-required中寻找true或false字符串......但它不能执行条件表达式。

换句话说，无论你输入什么作为data-rule-required的值，jQuery 验证插件都会将其解释为字符串，并阻塞除"true"或"false"以外的任何内容。

Answer 2

数据属性无法触发事件。最好写一个javascript函数，并通过单击，焦点，调整大小，鼠标向上调用它...事件。喜欢：

 <input class="user" name="">
 <script>
  $(".user").focus(function(){
 if($(this).val()=="doctor"){
 // do what ever
  }
  });

Answer 3

OP 询问的内容通常是不可能的。但是，在某些简单情况下，可以仅使用数据属性进行条件验证。 下面是一个示例：

<form action="#" method="post">
    <label for="password">Set new password</label>
    <input type="password" id="password" name="password">
    <br>
    <label for="password-confirm">Confirm password</label>
    <input type="password" id="password-confirm"
        data-rule-equalto="#password"
        data-rule-required="#password:filled">
    <br>
    <input type="submit" value="save">
</form>

观看直播： JSFiddle

它不需要任何密码字段，除非第一个字段为非空，否则第二个字段将是必需的。 这要归功于jQuery Validate提供的额外选择器。

其他有用的选择器：:checked、:unchecked、:blank。