التحقق من صحة jQuery: كيفية إضافة قاعدة للتحقق من صحة التعبير العادية؟
https://stackoverflow.com/questions/280759
-
07-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أستخدم jQuery البرنامج المساعد التحقق من الصحة. أشياء عظيمة! أرغب في ترحيل حل ASP.NET الحالي لاستخدام jQuery بدلاً من صحة ASP.NET. أنا أفتقد بديل ل تعبير عادي المدقق. أريد أن أكون قادرًا على فعل شيء كهذا:
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" })
كيف أفعل أضف قاعدة مخصصة لتحقيق هذا؟
المحلول
بفضل إجابة RedSquare ، أضفت طريقة مثل هذه:
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
الآن كل ما عليك القيام به للتحقق من صحة أي Regex هو:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })
بالإضافة إلى ذلك ، يبدو أن هناك ملفًا يسمى methods.js إضافي يحتوي على الطريقة "نمط" ، والتي يمكن أن تكون regexp عند إنشائها باستخدام الطريقة بدون علامات اقتباس.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js
نصائح أخرى
يمكنك استخدام addmethod ()
على سبيل المثال
$.validator.addMethod('postalCode', function (value) {
return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value);
}, 'Please enter a valid US or Canadian postal code.');
واجهت بعض المتاعب في تجميع جميع القطع للقيام بمقاومة التعبير العادية jQuery ، لكنني حصلت على العمل ... إليك مثال عمل كامل. يستخدم البرنامج المساعد "التحقق من الصحة" الذي يمكن العثور عليه في المكوّن الإضافي للتحقق من صحة jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://YOURJQUERYPATH/js/jquery.js" type="text/javascript"></script>
<script src="http://YOURJQUERYPATH/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$.validator.addMethod("EMAIL", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Email Address is invalid: Please enter a valid email address.");
$.validator.addMethod("PASSWORD",function(value,element){
return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/i.test(value);
},"Passwords are 8-16 characters with uppercase letters, lowercase letters and at least one number.");
$.validator.addMethod("SUBMIT",function(value,element){
return this.optional(element) || /[^ ]/i.test(value);
},"You did not click the submit button.");
// Validate signup form on keyup and submit
$("#LOGIN").validate({
rules: {
EMAIL: "required EMAIL",
PASSWORD: "required PASSWORD",
SUBMIT: "required SUBMIT",
},
});
});
</script>
</head>
<body>
<div id="LOGIN_FORM" class="form">
<form id="LOGIN" name="LOGIN" method="post" action="/index/secure/authentication?action=login">
<h1>Log In</h1>
<div id="LOGIN_EMAIL">
<label for="EMAIL">Email Address</label>
<input id="EMAIL" name="EMAIL" type="text" value="" tabindex="1" />
</div>
<div id="LOGIN_PASSWORD">
<label for="PASSWORD">Password</label>
<input id="PASSWORD" name="PASSWORD" type="password" value="" tabindex="2" />
</div>
<div id="LOGIN_SUBMIT">
<input id="SUBMIT" name="SUBMIT" type="submit" value="Submit" tabindex="3" />
</div>
</form>
</div>
</body>
</html>
لا يوجد سبب لتحديد regex كسلسلة.
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var check = false;
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
و
telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 },
تيس أفضل بهذه الطريقة ، لا؟
كما ذكر في وثائق AddMethod:
يرجى ملاحظة: على الرغم من أن الإغراء أمر رائع لإضافة طريقة regex التي تتحقق من المعلمة مقابل القيمة ، إلا أنها أكثر نظافة لتغليف تلك التعبيرات العادية داخل طريقتها الخاصة. إذا كنت بحاجة إلى الكثير من التعبيرات المختلفة قليلاً ، فحاول استخراج معلمة مشتركة. مكتبة من التعبيرات العادية: http://regexlib.com/displaypatterns.aspx
لذا نعم ، عليك إضافة طريقة لكل تعبير منتظم. تكون النفقات العامة ضئيلة ، في حين أنها تتيح لك إعطاء اسم regex اسمًا (لا يجب التقليل من شأنه) ، رسالة افتراضية (مفيدة) والقدرة على إعادة استخدامها في أماكن مختلفة ، دون تكرار Regex نفسه مرارًا وتكرارًا.
تمديد إجابة Petertheniceguy قليلاً:
$.validator.addMethod(
"regex",
function(value, element, regexp) {
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
هذا من شأنه أن يسمح لك بتمرير كائن regex إلى القاعدة.
$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ });
إعادة تعيين lastIndex الخاصية ضرورية عندما تكون g-تم تعيين flag على RegExp هدف. وإلا فإنه سيبدأ بالتحقق من التحقق من موضع المباراة الأخيرة مع هذا Regex ، حتى لو كانت سلسلة الموضوع مختلفة.
بعض الأفكار الأخرى التي كانت لديّ لتمكينك من استخدام صفائف Regex ، وقاعدة أخرى لتنفي Regex:
$("password").rules("add", {
regex: [
/^[a-zA-Z'.\s]{8,40}$/,
/^.*[a-z].*$/,
/^.*[A-Z].*$/,
/^.*[0-9].*$/
],
'!regex': /password|123/
});
لكن تنفيذ تلك قد يكون أكثر من اللازم.
لقد حصلت على العمل مثل هذا:
$.validator.addMethod(
"regex",
function(value, element, regexp) {
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
$(function () {
$('#uiEmailAdress').focus();
$('#NewsletterForm').validate({
rules: {
uiEmailAdress:{
required: true,
email: true,
minlength: 5
},
uiConfirmEmailAdress:{
required: true,
email: true,
equalTo: '#uiEmailAdress'
},
DDLanguage:{
required: true
},
Testveld:{
required: true,
regex: /^[0-9]{3}$/
}
},
messages: {
uiEmailAdress:{
required: 'Verplicht veld',
email: 'Ongeldig emailadres',
minlength: 'Minimum 5 charaters vereist'
},
uiConfirmEmailAdress:{
required: 'Verplicht veld',
email: 'Ongeldig emailadres',
equalTo: 'Veld is niet gelijk aan E-mailadres'
},
DDLanguage:{
required: 'Verplicht veld'
},
Testveld:{
required: 'Verplicht veld',
regex: '_REGEX'
}
}
});
});
تأكد من أن regex بين / :-)
يمكنك استخدام pattern محددة في additional-methods.js ملف. لاحظ أنه يجب تضمين ملف methods.js الإضافي هذا بعد، بعدما jQuery التحقق من صحة التبعية ، ثم يمكنك فقط استخدام
$("#frm").validate({
rules: {
Textbox: {
pattern: /^[a-zA-Z'.\s]{1,40}$/
},
},
messages: {
Textbox: {
pattern: 'The Textbox string format is invalid'
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<form id="frm" method="get" action="">
<fieldset>
<p>
<label for="fullname">Textbox</label>
<input id="Textbox" name="Textbox" type="text">
</p>
</fieldset>
</form>هذا هو رمز العمل.
function validateSignup()
{
$.validator.addMethod(
"regex",
function(value, element, regexp)
{
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
$('#signupForm').validate(
{
onkeyup : false,
errorClass: "req_mess",
ignore: ":hidden",
validClass: "signup_valid_class",
errorClass: "signup_error_class",
rules:
{
email:
{
required: true,
email: true,
regex: /^[A-Za-z0-9_]+\@[A-Za-z0-9_]+\.[A-Za-z0-9_]+/,
},
userId:
{
required: true,
minlength: 6,
maxlength: 15,
regex: /^[A-Za-z0-9_]{6,15}$/,
},
phoneNum:
{
required: true,
regex: /^[+-]{1}[0-9]{1,3}\-[0-9]{10}$/,
},
},
messages:
{
email:
{
required: 'You must enter a email',
regex: 'Please enter a valid email without spacial chars, ie, Example@gmail.com'
},
userId:
{
required: 'Alphanumeric, _, min:6, max:15',
regex: "Please enter any alphaNumeric char of length between 6-15, ie, sbp_arun_2016"
},
phoneNum:
{
required: "Please enter your phone number",
regex: "e.g. +91-1234567890"
},
},
submitHandler: function (form)
{
return true;
}
});
}
نستخدم بشكل أساسي تدوين الترميز المكوّن الإضافي لـ JQuery ، ولم تنجح العينات المنشورة بالنسبة لنا ، عندما تكون الأعلام موجودة في Regex ، على سبيل المثال
<input type="text" name="myfield" regex="/^[0-9]{3}$/i" />
لذلك نستخدم المقتطف التالي
$.validator.addMethod(
"regex",
function(value, element, regstring) {
// fast exit on empty optional
if (this.optional(element)) {
return true;
}
var regParts = regstring.match(/^\/(.*?)\/([gim]*)$/);
if (regParts) {
// the parsed pattern had delimiters and modifiers. handle them.
var regexp = new RegExp(regParts[1], regParts[2]);
} else {
// we got pattern string without delimiters
var regexp = new RegExp(regstring);
}
return regexp.test(value);
},
"Please check your input."
);
بالطبع يمكن للمرء الآن الجمع بين هذا الرمز ، مع أحد ما سبق للسماح أيضًا بتمرير كائنات regexp في البرنامج المساعد ، ولكن بما أننا لم نحتاجه ترك هذا التمرين للقارئ ؛-).
ملاحظة: هناك أيضًا مكون إضافي مجمل لذلك ، https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js
لقد نجح هذا الأمر بالنسبة لي ، كونه أحد قواعد التحقق من الصحة:
Zip: {
required: true,
regex: /^\d{5}(?:[-\s]\d{4})?$/
}
أتمنى أن يساعد ذلك
