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

Question

使用 jQuery 验证，我正在对 select 和 text 字段进行条件验证：如果从 select 字段 (#job)

中选择了特定选项 (<option value="doctor">)

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

现在，我不想弄乱太多的 JS 代码，我想利用 data-rule-required 属性。因此，我想直接在 HTML 代码中计算表达式 ($('#job').val() === 'doctor')，将其从 Javascript 中删除：如果它 returns 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

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

 <input class="user" name="">

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

Answer 2

How to: Use data attribute for conditional validation

你不能。

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

即使您可以在 data 属性内执行 JavaScript，但您不能 the jQuery Validate plugin cannot interpret it (see the JS errors in the console)。通常，它会在 data-rule-required... 中寻找 true 或 false 字符串，但它不能执行条件表达式。

换句话说，无论您将什么作为 data-rule-required 的值，jQuery Validate 插件都会将其解释为字符串并阻塞除 "true" 或"false".

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

它不需要任何一个密码字段，除非第一个字段是非空的，否则第二个字段将是必需的。这要归功于 extra selectors provided by jQuery Validate.

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

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

How to: Use data attribute for conditional validation

jquery

attributes

jquery-validate