jQuery valide: Comment append une règle pour la validation des expressions régulières?

J’utilise le plugin de validation jQuery . Des trucs super! Je souhaite migrer ma solution ASP.NET existante pour utiliser jQuery au lieu des validateurs ASP.NET. Il me manque un remplacement pour le validateur d’ expressions régulières . Je veux pouvoir faire quelque chose comme ça:

$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" }) 

Comment puis-je append 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 devez 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 qui contient la méthode “pattern”, qui peut être un RegExp lorsqu’elle est créée en utilisant 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})|([AZ]\d[AZ]\s\d[AZ]\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 à rassembler tous les éléments pour faire un validateur d’expressions régulières jQuery, mais je l’ai fait fonctionner … Voici un exemple de travail complet. Il utilise le plugin ‘Validation’ qui se trouve dans le plugin de validation jQuery

          

Log In

Aucune raison de définir le regex 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 comme ça, non?

Comme mentionné sur la documentation addMethod :

Remarque: Bien que la tentation soit grande d’append une méthode regex qui vérifie son paramètre par rapport à la valeur, il est beaucoup plus propre d’encapsuler ces expressions régulières dans leur propre méthode. Si vous avez besoin de beaucoup d’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

Donc oui, vous devez append une méthode pour chaque expression régulière. La surcharge est minime, alors qu’elle vous permet de donner à l’expression rationnelle un nom (à ne pas sous-estimer), un message par défaut (pratique) et la possibilité de la réutiliser à différents endroits, sans dupliquer la regex elle-même.

Extension de 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 object 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 g -flag est défini sur l’object RegExp . Sinon, il commencerait à valider à partir de la position de la dernière correspondance avec cette expression régulière, même si la chaîne de sujet est différente.

J’ai eu d’autres idées pour vous permettre d’utiliser des tableaux de regex et une autre règle pour la négation des regex:

 $("password").rules("add", { regex: [ /^[a-zA-Z'.\s]{8,40}$/, /^.*[az].*$/, /^.*[AZ].*$/, /^.*[0-9].*$/ ], '!regex': /password|123/ }); 

Mais les mettre en œuvre serait peut-être trop.

Je l’ai fait fonctionner comme ça:

 $.validator.addMethod( "regex", function(value, element, regexp) { var check = false; 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 le regex est entre / 🙂

C’est du 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, 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: "eg +91-1234567890" }, }, submitHandler: function (form) { return true; } }); } 

Vous pouvez utiliser le pattern défini dans le fichier additional-methods.js . Notez que ce fichier additional-methods.js doit être inclus après la dépendance jQuery Validate, alors vous pouvez simplement utiliser

 $("#frm").validate({ rules: { Textbox: { pattern: /^[a-zA-Z'.\s]{1,40}$/ }, }, messages: { Textbox: { pattern: 'The Textbox ssortingng format is invalid' } } }); 
    

Nous utilisons principalement la notation de balisage du plug-in de validation jquery et les exemples publiés ne fonctionnaient pas pour nous, lorsque des drapeaux étaient présents dans le regex, par exemple

  

par conséquent, nous utilisons l’extrait suivant

 $.validator.addMethod( "regex", function(value, element, regssortingng) { // fast exit on empty optional if (this.optional(element)) { return true; } var regParts = regssortingng.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 ssortingng without delimiters var regexp = new RegExp(regssortingng); } return regexp.test(value); }, "Please check your input." ); 

Bien sûr, on pourrait maintenant combiner ce code, avec l’un des éléments ci-dessus pour permettre également de passer des objects 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 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 cela aide