jquery validate：自定义验证规则

Posted

技术标签:

【中文标题】jquery validate：自定义验证规则【英文标题】：jquery validate: custom validation rule 【发布时间】：2011-04-10 08:09:38 【问题描述】：

我希望此表单仅在用户选择“Sí”作为选择问题的答案时才需要字段“Nombre”。此外，如果用户选择“Sí”，则应提供电子邮件或电话（在 teléfono 中）。

我正在使用验证插件，但没有找到包含类似规则的文档。我该如何编码？

查看the documentation，我想我需要编写required(dependency-expression) 或required(dependency-callback) 方法，但我不知道哪个或如何，因为单击这些方法时，他们的文档似乎丢失了=/

<html> 
<head>

<style type="text/css">

label  width: 10em; float: left; 
label.error  float: none; color: red; padding-left: .5em; vertical-align: top; 
p  clear: both; 

em  font-weight: bold; padding-right: 1em; vertical-align: top; 
</style>



  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <link rel="stylesheet" type="text/css" media="screen" href="mistylesheet.css" />
<script>
  $(document).ready(function()
    $("#commentForm2").validate();
  );


  </script>

</head>
<body>
<form id="commentForm2">

     <center><table class="layouttable">

        <tr class='row1'><td> <b>&#191;Recomendar&iacute;a nuestros servicios a otra empresa o persona?  </b></td></tr>
        <tr class='row2'><td> 



        <select id = "recomiendaONo" name="recomiendaONo" class="required">
           <option value="">Seleccione su respuesta</option>
             <option value="Si">S&iacute;</option>
         <option value="No">No</option>

        </select>



        </td></tr>


  </table></center>    






<div class='margenrecomendaciones'>
<table>

<tbody>


<tr>



<td><div align="left">Nombre:</div></td> 

<td><div align="left"><input class="texto" id="nombreRecomendado" name="nombreRecomendado" type="text" size="30"/></div></td>

</tr>      




<td><div align="left">Email:</div></td>

<td><div align="left"> <input  class="texto" id="emailRecomendado" name="emailRecomendado" type="text" size="30"/></div></td>




</tr>

<tr>



<td><div align="left">Tel&eacute;fono:</div></td>

<td><div align="left"> <input class=" texto" name="telefonoRecomendado" id="telefonoRecomendado" type="text" size="30"/></div></td>




</tr>


</tbody>

</table>
</div>


    <center><input type="submit"></center>


</form>
</body>
</html>

【问题讨论】：

【参考方案1】：

您可以查看他们的演示页面并查看硬编码示例如何使其工作。字段刚刚使用JavaScript禁用，如果未选择选择，则选择选择选择时，禁用属性被删除。

从演示站点复制粘贴：

//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() 
    topics[this.checked ? "removeClass" : "addClass"]("gray");
    topicInputs.attr("disabled", !this.checked);
);

http://jquery.bassistance.de/validate/demo/

【讨论】：

谢谢，但这不是我要找的。​​span> 【参考方案2】：

您需要创建自己的自定义规则，并将此类添加到您的两个字段中。

在你的 js 文件中：

jQuery.validator.addMethod("newRuleOr", function(value, element) 
        if($('#recomiendaONo').val() == 'Si')
            return $('#emailRecomendado').val() != '' && $('#telefonoRecomendado').val();
        
        return true;
   , "Telefono o mail deben informarse."
);

并且在您的 html 代码中，您必须将新类添加到字段中。

<input class="texto newRuleOr" id="nombreRecomendado" name="nombreRecomendado" type="text" size="30"/>
...
<input  class="texto newRuleOr" id="emailRecomendado" name="emailRecomendado" type="text" size="30"/>

另一个提示，切勿使用表格来设置页面样式，使用 div、浮点数和百分比。

【讨论】：

以上是关于jquery validate：自定义验证规则的主要内容，如果未能解决你的问题，请参考以下文章

请问jQuery validate自定义验证规则怎么调用

jquery validate：自定义验证规则

Jquery Validate 相关参数及常用的自定义验证规则

jQuery Validate 不作用于自定义验证值

jQuery基础学习06 jQuery表单验证插件-Validation

jquery.validate.js之自定义表单验证规则