jQuery validate: comment ajouter une règle pour la validation des expressions régulières?
J'utilise le jQuery plugin de validation . De grandes choses! Je veux migrer mon existant ASP.NET solution pour utiliser jQuery au lieu de ASP.NET validateurs. Il me manque un remplacement pour leexpression régulière validateur. Je veux être capable de faire quelque chose comme ceci:
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.s]{1,40}$" })
Comment ajouter une règle personnalisée pour y parvenir?
11 réponses
Grâce à la réponse de redsquare j'ai ajouté une méthode comme ceci:
$.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 par rapport à une expression rationnelle est la suivante:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })
De plus, il semble qu'il existe un fichier appelé additional-methods.JS qui contient la méthode "pattern", qui peut être une expression rationnelle lorsqu'elle est créée en utilisant la méthode sans citation.
Http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js
Vous pouvez utiliser 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 à rassembler toutes les pièces pour faire un validateur d'expression régulière jQuery, mais je l'ai fait fonctionner... Voici un exemple de travail complet. Il utilise le plugin 'Validation' qui peut être trouvé dans greffon 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 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 },
Tis mieux de cette façon, non?
Comme mentionné dans la documentation addMethod :
Veuillez noter: Bien que la tentation soit grande d'ajouter 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
Si oui, vous devez ajouter 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 le réutiliser à différents endroits, sans dupliquer l'expression rationnelle elle-même encore et encore.
É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 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 le g-flag 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.
D'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 les expressions rationnelles:
$("password").rules("add", {
regex: [
/^[a-zA-Z'.\s]{8,40}$/,
/^.*[a-z].*$/,
/^.*[A-Z].*$/,
/^.*[0-9].*$/
],
'!regex': /password|123/
});
Mais les mettre en œuvre serait peut-être trop.
Je l'ai fait fonctionner comme ceci:
$.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 l'expression rationnelle est entre / :-)
Ce code fonctionne.
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;
}
});
}
Vous pouvez utiliser pattern défini dans le additional-methods.js fichier. Notez que cette supplémentaire-méthodes.js fichier doit être inclus après jQuery Valider la dépendance, alors 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>Nous utilisons principalement la notation de balisage du plugin de validation jquery et les échantillons affichés ne fonctionnaient pas pour nous, lorsque des drapeaux sont présents dans l'expression rationnelle, 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 maintenant on pourrait combiner ce code, avec l'un des ci-dessus pour permettre également de passer des objets RegExp dans le plugin, mais comme nous n'en avions pas besoin, nous avons laissé cet exercice au lecteur; -).
PS: il y a aussi un plugin fourni 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