Javascript - jQuery 验证插件规则方法不起作用

Question

我有一个简单的 javascript 文件，只需要运行规则方法。不幸的是，由于某种原因它不起作用。我知道我的自定义 javascript 文件渲染得很好，因为输入掩码工作正常。我已经仔细检查以确保渲染了 jquery 验证脚本，所以我不确定我的问题是什么。该项目是一个在Visual Studio Enterprise 2015平台上编写的简单的mvc网站。该网站上的相关页面是 EditInfo 页面，供您引用。

这是添加验证包的 BundleConfig.cs。

public static void RegisterBundles(BundleCollection bundles)
    {
     //More bundles obviously are added
      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));
    }

接下来，这是渲染脚本的布局文件。

@Scripts.Render("~/bundles/jqueryval")

接下来，这是在 View 中声明的 2 个自定义 JavaScript 文件。

    <script src="@Url.Content("~/Scripts/EditInfo.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script>

然后，这里是使用 validate 方法的 EditInfo 自定义 javascript 文件。这是整个文件，减去与输入屏蔽有关的 3 行，这些行工作正常。

$(document).ready(function () {
var counter = 0;
var $CreateProfilevalidator = {};


$CreateProfilevalidator = $("#frmEditInfo").validate({
    rules: {
        personalEmail:/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,15}|[0-9]{1,3})(\]?)$/i,
        otherEmail: /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,15}|[0-9]{1,3})(\]?)$/i,
        workCell: /^\(?\d{3}\)?\s?-?\d{3}\s?-?\d{4}$/,
        personalCell: /^\(?\d{3}\)?\s?-?\d{3}\s?-?\d{4}$/,
        otherPhone: /^\(?\d{3}\)?\s?-?\d{3}\s?-?\d{4}$/
    },
    messages: {
        personalEmail: "Invalid Email",
        otherEmail: "Invalid Email",
        workCell: "Invalid Phone Number",
        personalCell: "Invalid Phone Number",
        otherPhone: "Invalid Phone Number"
    },
    errorPlacement: function (error, element) {
        errorPlacementValidator(error, element);
    },
    highlight: function (element, errorClass, validClass) {
        counter++;
        highlightValidator(element, errorClass, validClass, counter);
    },
    unhighlight: function (element, errorClass, validClass) {
        counter++;
        unhighlightValidator(element, errorClass, validClass, counter);
    }

});
});

最后，这是 app.js 文件，其中包含我的 javascript 文件中使用的 3 个验证器方法。

function errorPlacementValidator(error, element) {
if (element.is(":radio")) {
    error.appendTo(element.closest("[class*='col-sm-']"));
}
else if (element.parents('.selectric-wrapper').size() > 0) {
    console.log('selectric error');
    error.appendTo(element.closest('[class*="col-sm-"]'));
}
else {
    error.appendTo(element.parent());
}
}

function highlightValidator(element, errorClass, validClass, counter) {
var $parent = $(element).parent();

// remove icon and success spans if any
$parent.find("span.form-control-feedback, span.sr-only").remove();

// add ".error" class to input element
$(element).addClass(errorClass).removeClass(validClass);

// add Bootstrap ".has-error" class to parent div.form-group element
$(element).closest(".form-group").removeClass("has-success").addClass("has-error has-feedback");

// need to have it check to see if span already added
// only add for non radio or non select input elements
if (!$(element).is(":radio, select, textarea, :checkbox, .btn") && !$(element).hasClass("datepicker")) {
    counter++;

    var $spans = $parent.find("span");

    // check to make sure error spans are not already in form-group before attempting to append after input
    if ($spans.length == 0) {
        // add span element with ".glyphicon" ".glyphicon-remove" ".form-control-feedback" classes after input
        $(element).after("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>");
        $(element).after("<span id='inputError" + counter + "Status'" + " class='sr-only'>(error)</span>");
    }
}
}

function unhighlightValidator(element, errorClass, validClass, counter) {
var $parent = $(element).parent();

// remove icon and success spans if any
$parent.find("span.form-control-feedback, span.sr-only").remove();

// remove ".error" class from input element
$(element).removeClass(errorClass).addClass(validClass);

if (!$(element).is(":radio, select, textarea, :checkbox, .btn") && !$(element).hasClass("datepicker")) {
    // // remove Bootstrap ".has-error" class from parent div.form-group element
    $(element).closest(".form-group").removeClass("has-error").addClass("has-success has-feedback");

    var $spans = $parent.find("span");

    if ($spans.length == 0 && !$(element).is("select")) {
        $(element).after("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>");
        $(element).after("<span id='inputSuccess" + counter + "Status'" + " class='sr-only'>(error)</span>");
    }
} else if ($(element).parents('.selectric-wrapper').size() > 0) {
    $(element).closest(".form-group").removeClass("has-error").addClass("has-success has-feedback");
}
}

我已经用谷歌搜索并做了研究，但原因仍然无法理解。如果我遗漏了任何重要信息，我深表歉意。但是，当我输入格式不正确的电子邮件地址或短于所需的电话号码时，我正在编写的网站仍然不会给出错误。编辑:措辞

Answer 1

rules 对象是使用以逗号分隔的 key: value 对列表构造的，这些对表示字段名称及其方法。方法部分内部是另一个以逗号分隔的key: value 对列表，它们表示方法名称及其参数。您的尝试完全缺少实际的规则(方法)。

$('#yourform').validate({
    rules: {  
        fieldname1: {        // <- field NAME
            required: true,  // <- rule (method) : parameter
            phoneUS: true    // <- rule (method) : parameter
        },
        fieldname2: {        // <- field NAME
            required: true,  // <- rule (method) : parameter
            email: true      // <- rule (method) : parameter
            .....

<小时/>

如果您想验证正则表达式，那么您需要使用the additional-methods.js file中的pattern方法。 .

$CreateProfilevalidator = $("#frmEditInfo").validate({
    rules: {
        personalEmail: {
            pattern: /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,15}|[0-9]{1,3})(\]?)$/i
        },
        otherEmail: {
            pattern: /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,15}|[0-9]{1,3})(\]?)$/i
        } 
        ....

由于您的规则列表丢失，我也不知道您是否需要 required 字段等。但您还需要列出这些规则。

当我们这样做时，为什么要使用正则表达式？该插件已经包含了各种电话号码和电子邮件地址的方法。请参阅文档并浏览附加方法文件。