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

Custom Regex Validator in Parsley.js

本文关键字：正则表达式 验证 自定义 js 欧芹      更新时间：2023-09-26

Issue

我在为 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%;" alt="Sign Up Now" 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。

小提琴

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

如果你看一下Javascript控制台，你会看到一个错误：

未捕获的类型错误：窗口。Parsley.addValidator 不是一个函数

这意味着您使用的版本尚未更新(以前使用的版本window.ParsleyValidator.addValidator (。因此，如果您只是将 Parsley.js 更新到正确的版本，您的代码将起作用。看到这个小提琴。

但是，有一种更简单的方法来完成您需要的操作(即，无需自定义验证器(。您可以使用内置模式 ( 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%;" alt="Sign Up Now" value="Submit Account Request" />
</form>

我更改了什么：

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

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

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

JsFiddle 可在此处获得。

相关文章：