jQuery validate: Comment ajouter une règle pour la validation des expressions régulières?
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 de l'expression régulière . Je veux être capable de faire quelque chose comme ça:
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" })
Comment puis-je ajouter une règle personnalisée pour y parvenir?
Grâce à 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 contre une regex est la suivante:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })
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
Vous pouvez utiliser la méthode addMethod ()
par 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.');
bon article ici 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 plugin 'Validation' qui peut être trouvé dans plugin jQuery Validation
<!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 régulière comme une 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?
Prolonger 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 passer 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’indicateur g- est défini 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.
Quelques autres idées que j'ai eues é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.
Comme mentionné sur le documentation addMethod :
Remarque: Bien que la tentation soit grande 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 dupliquer la regex elle-même, encore et encore.
Je l'ai fait fonctionner comme ceci:
$.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 rationnelle est entre / :-)
Vous pouvez utiliser pattern défini dans le fichier additional-methods.js. Notez que ce fichier additional-methods.js doit être inclus after 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 le code de travail.
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, [email protected]'
},
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 drapeaux 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 plugin, mais comme nous n'en avions pas besoin, nous avons laissé cet exercice au lecteur ;-).
PS: il existe également un plugin intégré pour cela, 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