Parsley.js 中的自定义正则表达式验证器

Posted 2023-05-09

【中文标题】Parsley.js 中的自定义正则表达式验证器

【英文标题】：Custom Regex Validator in Parsley.js

【发布时间】：2016-01-22 05:35:04

【问题描述】：

问题

我在为 Parsley.js 插件创建自定义验证器时遇到问题。我想要做的是测试一个值与一个正则表达式。具体来说，我正在尝试验证密码值是否至少包含一个大写字母和一个小写字母。验证代码会引发错误，但在满足条件时不会返回 true。

HTML

<form name="Form" id="signupform" method="post" action="#" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
      <label for="password1">New Password <span class="req">*</span></label>
      <input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required/>
      <span class="errorspannewpassinput"></span>
      <label for="confirm_password1">Confirm Password <span class="req">*   </span></label>
      <input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required />
      <span class="errorspanconfirmnewpassinput"></span>
      <input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;"  value="Submit Account Request" />
</form> 

jQuery

  $(function() 
    // Set variables
    var pmixedCase = 'Y';
    var mixedCase = $('.mixedcase');
    var passwordField = $('#password1, #password2');
    var passwordFieldErrors = $('.errorspannewpassinput, .errorspanconfirmnewpassinput');
    // Assemble list of visible password requirements
    // Mixed Case
    if (pmixedCase === 'Y') 
        mixedCase.show();
     else 
        mixedCase.hide();
    
    // Custom Validators
    window.Parsley.addValidator('mixedcase', 
        requirementType: 'regexp',
        validateString: function(value, requirement) 
            return requirement.test(value);
        ,
        messages: 
            en: 'Your password must contain at least (1) lowercase and (1) uppercase letter.'
        
    );
); 

我在下面包含了一个 JSFiddle。

Fiddle

【问题讨论】：

好吧，模式是^(?=.*[a-z])(?=.*[A-Z]).*$，但它并不能解决整个问题:(。

我已经在上面的代码示例和小提琴中更新了这个。谢谢。我很确定 addvalidator 方法中存在问题。

【参考方案1】：

您面临的问题是您的 JsFiddle 使用的是 Parsley 2.1.2，而文档已更新为 Parsley 2.2.0。

如果您查看 javascript 控制台，您会看到一个错误：

未捕获的类型错误：window.Parsley.addValidator 不是函数

这意味着您正在使用的版本尚未更新（以前的版本使用window.ParsleyValidator.addValidator）。因此，如果您只是将 Parsley.js 更新为正确的版本，您的代码就可以工作。 See this fiddle.

---

但是，有一种更简单的方法可以完成您的需要（即，无需自定义验证器）。您可以使用内置模式 (data-parsley-pattern)。例如：

<form name="Form" id="signupform" method="post" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
    <label for="password1">New Password <span class="req">*</span></label>
    <input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter." data-parsley-required />
    <span class="errorspannewpassinput"></span>
    <label for="confirm_password1">Confirm Password <span class="req">*</span></label>
    <input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" data-parsley-required data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter."/>
    <span class="errorspanconfirmnewpassinput"></span>
    <input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;"  value="Submit Account Request" />
</form>

我改变了什么：

将两个输入上的 data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" 替换为 data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*"。

根据Marc-André Lafortune 的评论，我删除了开头的^ 和结尾的$，因为这些模式现在已锚定。

在两个输入上添加了data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter."。

JsFiddle available here.

【讨论】：

很棒的答案！请注意，模式现在已锚定，因此(?=.*[a-z])(?=.*[A-Z]).* 更好，或者/^(?=.*[a-z])(?=.*[A-Z]).*$/ 更明确。

谢谢你，米尔兹。我接受了您的回答，因为您提出了一个可行的解决方案。在我的应用程序中，我确实包含了最新的候选版本。我只是没有选择正确的版本我的小提琴。当我在 Fiddle 中将版本更新为 2.2.0 时，它确实可以正常工作。我知道 data-parsley-pattern 数据属性。我采用自定义验证器路线的原因是，该应用程序需要为此字段进行多达 3 个单独的正则表达式测试（抱歉，没有提及）。感谢您在回复中付出的时间和精力。

感谢@Marc-AndréLafortune。我已根据您的输入更新了答案。感谢您为 Parsley 所做的工作，使其更加强大！

同意。与其他 jQuery 验证插件一起工作是一个梦想。

html5 pattern 优于 data-parsley-pattern，所以即使 JS 被禁用它仍然可以工作。