[英]Javascript - jQuery Validate plugin rules method not working
我有一個簡單的javascript文件,只需要運行rules方法。 不幸的是,由於某種原因,它無法正常工作。 我知道我的自定義JavaScript文件可以很好地呈現,因為輸入蒙版可以正常工作。 我已仔細檢查以確保呈現了jquery validate腳本,因此我不確定我的問題是什么。 該項目是在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")
接下來,這是在視圖中聲明的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");
}
}
我已經用谷歌搜索並完成了研究,但是原因仍然沒有得到我的掌握。 如果我遺漏了任何重要信息,我深表歉意。 但是,當我輸入格式錯誤的電子郵件地址或短於要求的電話號碼時,我正在編寫的網站仍然不會出現錯誤。 編輯:措辭
rules
對象是使用逗號分隔的key: value
對列表構成的,這些key: value
對表示字段名稱及其方法。 方法部分的內部是另一個逗號分隔的key: value
列表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
.....
如果要驗證正則表達式,則需要使用additional-methods.js
文件中一部分的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
字段,等等。但是您也需要列出這些規則。
當我們使用它時,為什么要使用所有正則表達式呢? 該插件已經包括用於電話號碼和電子郵件地址的各種方法。 請參考文檔並瀏覽“其他方法”文件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.