jquery 验证插件来检查日期，但不是他们的占位符文本

Posted 2023-05-09

【中文标题】jquery 验证插件来检查日期，但不是他们的占位符文本

【英文标题】：jquery validation plugin to check dates but not their placeholder text

【发布时间】：2013-02-15 03:02:14

【问题描述】：

我有占位符值的输入，例如：

<input type="text" name="mydate" value="yyyy-mm-dd">

如何更改我的规则以仅在值不是“yyyy-mm-dd”时执行？

$(document).ready(function()
   $("form.myclasstovalidate").validate(
       rules:     
    mydate: 
            date: true
               
       
 );

【问题讨论】：

我不会称它为占位符。

【参考方案1】：

基本上你遇到了一个问题，因为你的占位符文本只是输入框中的一个值，它“模仿”了占位符功能。您可能会在单击时将其删除，如果用户清空输入框的内容则将其返回，当然要进行验证调整以不将占位符验证为真实值等等...

您可以使用 html5 的 placeholder 属性来代替上述所有内容；)

【参考方案2】：

在您的标记中使用 placeholder 属性将解决您的问题，因为它不是一个实际值，而是一个真正的占位符并按应有的方式发挥作用。顺便说一句，您的 javascript 也有语法错误。我已经在我的回答中修复了它们。

<input type="text" name="mydate" placeholder="yyyy-mm-dd" />

$(document).ready(function()
   $("form.myclasstovalidate").validate(
       rules:     
    mydate: 
            date: true
               
       
    );
 );

【参考方案3】：

无论出于何种原因，如果您不想使用placeholder 属性，您可以使用the plugin's addMethod() method 创建自定义规则。即使 OP 采用了替代方法，这也是如何创建新规则的一个很好的教训。

由于您声明您只希望在值不是 "yyyy-mm-dd" 时发生 date 验证，因此我只是添加了一个条件来检查元素的 defaultValue 输入的值，并放置默认的 date 方法/里面的规则代码。

jQuery.validator.addMethod("mydaterule", function (value, element) 
    if (value != element.defaultValue) 
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
     else 
        return true;
    
, 'please enter a valid date');

您可以根据需要进一步调整它。

按如下方式应用新规则：

$('#myform').validate(
    rules: 
        mydate: 
            mydaterule: true
        
    
);

演示：http://jsfiddle.net/Acew7/

重要提示："yyyy-mm-dd" 不是满足默认date 规则的正确格式。但是，"yyyy/mm/dd" 会起作用。

例如

2013-02-28 将失败 date 验证 2013/02/28 将通过date 验证