jQuery validate: Comment ajouter une règle pour la validation des expressions régulières?
https://stackoverflow.com/questions/280759
-
07-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'utilise le plugin de validation jQuery . Super truc! Je souhaite migrer ma solution ASP.NET existante pour utiliser jQuery au lieu des validateurs ASP.NET. Il me manque un remplaçant pour le validateur d'expression régulière . Je veux pouvoir faire quelque chose comme ça:
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}<*>quot; })
Comment ajouter une règle personnalisée pour y parvenir?
La solution
Merci à la réponse de redsquare, j'ai ajouté une méthode comme celle-ci:
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
maintenant, tout ce que vous avez à faire pour valider par rapport à une expression rationnelle est le suivant:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}<*>quot; })
En outre, il semble qu'il existe un fichier appelé additional-methods.js contenant la méthode "pattern", qui peut être une RegExp lorsqu'il est créé à l'aide de la méthode sans guillemets.
http://bassistance.de/jquery-plugins/jquery-plugin-validation /
http://ajax.aspnetcdn.com/ajax/ jquery.validate / 1.9 / additional-methods.js
Autres conseils
Vous pouvez utiliser la méthode addMethod ()
exemple
$.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.');
good article here https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation- plugin /
J'ai eu du mal à assembler tous les éléments nécessaires à la réalisation d'un validateur d'expressions rationnelles jQuery, mais je me suis assuré de son bon fonctionnement ... Voici un exemple de travail complet. Il utilise le plug-in 'Validation' qui se trouve dans plug-in de validation 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>
Aucune raison de définir l'expression rationnelle en tant que chaîne.
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var check = false;
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
et
telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 },
c’est mieux ainsi, non?
Comme indiqué dans la documentation addMethod :
Remarque: s'il est tentant d'ajouter une méthode regex qui compare son paramètre à la valeur, il est beaucoup plus propre d'encapsuler ces expressions régulières dans leur propre méthode. Si vous avez besoin de nombreuses expressions légèrement différentes, essayez d’extraire un paramètre commun. Une bibliothèque d'expressions régulières: http://regexlib.com/DisplayPatterns.aspx
Alors oui, vous devez ajouter une méthode pour chaque expression régulière. Les frais généraux sont minimes, alors qu’il vous permet de donner à la regex un nom (à ne pas sous-estimer), un message par défaut (pratique) et la possibilité de le réutiliser à différents endroits, sans duplication répétée de la regex elle-même.
Étendre un peu la réponse de 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."
);
Cela vous permettrait de transmettre un objet regex à la règle.
$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ });
La réinitialisation de la propriété lastIndex est nécessaire lorsque l'option g est définie sur l'objet RegExp . Sinon, il commencerait à valider à partir de la position de la dernière correspondance avec cette expression rationnelle, même si la chaîne de sujet est différente.
Certaines autres idées que j'avais étaient de vous permettre d'utiliser des tableaux de regex, et une autre règle pour la négation de regex:
$("password").rules("add", {
regex: [
/^[a-zA-Z'.\s]{8,40}$/,
/^.*[a-z].*$/,
/^.*[A-Z].*$/,
/^.*[0-9].*$/
],
'!regex': /password|123/
});
Mais les appliquer serait peut-être trop.
Je l’ai obtenu comme ça:
$.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'
}
}
});
});
Assurez-vous que l'expression régulière est entre / : -)
Vous pouvez utiliser le modèle défini dans le fichier additional-methods.js . Notez que ce fichier additional-methods.js doit être inclus après jQuery Valider la dépendance, vous pouvez simplement utiliser
$("#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>
Ceci est un code fonctionnel.
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;
}
});
}
nous utilisons principalement la notation de balisage du plug-in de validation jquery et les exemples postés ne fonctionnaient pas pour nous, lorsque des indicateurs sont présents dans la regex, par exemple.
<input type="text" name="myfield" regex="/^[0-9]{3}$/i" />
Par conséquent, nous utilisons l'extrait suivant
$.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."
);
Bien sûr, on peut maintenant combiner ce code avec l'un des éléments ci-dessus pour autoriser également le passage d'objets RegExp dans le plug-in, mais comme nous n'en avions pas besoin, nous avons laissé cet exercice au lecteur ;-).
PS: il existe également un plugin intégré, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js
Cela a fonctionné pour moi, étant l'une des règles de validation:
Zip: {
required: true,
regex: /^\d{5}(?:[-\s]\d{4})?$/
}
J'espère que ça aide
