parsley.js 可选地验证数字输入

Posted

技术标签:

【中文标题】parsley.js 可选地验证数字输入【英文标题】:parsley.js optionally validate number input 【发布时间】:2019-07-14 15:29:08 【问题描述】:

我有一个电话号码输入字段。它是表单上的可选字段,但如果已填充,则需要 10 位数字。所以,要么是空的,要么是 10 位数字。如何使用 parsley.js 完成此任务?

这个问题与我正在寻找的问题相似,但我尝试了各种组合,但它不起作用:

enter link description here

这是我的意见:

<input type="text" class="form-control form-control-sm m-input phone-num" autocomplete="off" style="display:none;" id="phone-input" name="phone" placeholder="0" data-parsley-trigger="keyup" data-parsley-validation-threshold="1" data-parsley-debounce="500" data-parsley-type="digits">

这是欧芹初始化(验证适用于同一表单上的其他字段,所以我认为这不是问题):

    $('#myForm').parsley(
      trigger: 'keyup',
      classHandler: function(el)
        return el.$element.closest('.form-group');
      ,
      errorClass: 'has-danger',
      errorsWrapper: '<div class="form-control-feedback"></div>',
      errorTemplate: '<span></span>'
    );

是否需要自定义验证?如果是这样,我该如何做到这一点?

【问题讨论】:

【参考方案1】:

只需将data-parsley-type="digits"data-parsley-minlength="10" data-parsley-maxlength="10" 的属性添加到input

例子:

<input type="text" class="form-control form-control-sm m-input phone-num" autocomplete="off" 
    style="display:none;" id="phone-input" 
    name="phone" placeholder="0" data-parsley-trigger="keyup" data-parsley-validation-threshold="1" 
    data-parsley-debounce="500" 
    data-parsley-type="digits" 
    data-parsley-minlength="10" 
    data-parsley-maxlength="10"/>

【讨论】:

完美!谢谢! MaxLength="10" 的问题是当他们输入以下格式时:333-222-1111,它会留下最后两位数字并发出警告......很多人使用破折号,括号和输入电话号码时的其他分隔符......同样在美国,很多人以 1(国家代码)开头......

以上是关于parsley.js 可选地验证数字输入的主要内容,如果未能解决你的问题,请参考以下文章

Parsley.js isValid() 使用自定义验证器返回 null

如何触发使用 Parsley.js 动态创建的元素的验证?

使用 jquery.inputmask 插件进行 parsley.js 验证

Parsley js:如何验证模态弹出窗口内的输入字段并在模态本身内显示错误消息

parsley.js 不验证多个验证

使用 parsley.js 验证表单提交外部表单标记