jQuery validate: ¿Cómo agregar una regla para la validación de expresiones regulares?
https://stackoverflow.com/questions/280759
-
07-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy usando el jQuery complemento de validación . ¡Buena cosa! Quiero migrar mi solución ASP.NET existente para usar jQuery en lugar de los validadores ASP.NET. Me falta un reemplazo para el validador expresión regular . Quiero poder hacer algo como esto:
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}<*>quot; })
¿Cómo agrego una regla personalizada para lograr esto?
Solución
Gracias a la respuesta de redsquare agregué un método como este:
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
ahora todo lo que necesita hacer para validar contra cualquier expresión regular es esto:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}<*>quot; })
Además, parece que hay un archivo llamado additional-method.js que contiene el método " patrón " ;, que puede ser un RegExp cuando se crea utilizando el método sin comillas.
http://bassistance.de/jquery-plugins/jquery-plugin-validation /
http://ajax.aspnetcdn.com/ajax/ jquery.validate / 1.9 / adicionales-métodos.js
Otros consejos
Puede usar addMethod ()
por ejemplo
$.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.');
buen artículo aquí https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation- plugin /
Tuve algunos problemas para reunir todas las piezas para hacer un validador de expresiones regulares jQuery, pero lo hice funcionar ... Aquí hay un ejemplo de trabajo completo. Utiliza el complemento 'Validación' que se puede encontrar en jQuery Validation Plugin
<!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>
No hay razón para definir la expresión regular como una cadena.
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var check = false;
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
y
telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 },
es mejor así, ¿no?
Como se menciona en la documentación de addMethod :
Tenga en cuenta: Si bien la tentación es excelente para agregar un método regex que verifica su parámetro con el valor, es mucho más limpio encapsular esas expresiones regulares dentro de su propio método. Si necesita muchas expresiones ligeramente diferentes, intente extraer un parámetro común. Una biblioteca de expresiones regulares: http://regexlib.com/DisplayPatterns.aspx
Entonces sí, debe agregar un método para cada expresión regular. La sobrecarga es mínima, mientras que le permite asignarle un nombre a la expresión regular (no debe subestimarse), un mensaje predeterminado (útil) y la capacidad de reutilizarla en varios lugares, sin duplicar la expresión regular una y otra vez.
Extendiendo un poco la respuesta 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."
);
Esto le permitiría pasar un objeto regex a la regla.
$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ });
Restablecer la propiedad lastIndex es necesario cuando la g -flag se establece en el objeto RegExp . De lo contrario, comenzaría a validarse desde la posición de la última coincidencia con esa expresión regular, incluso si la cadena de asunto es diferente.
Algunas otras ideas que tuve fue permitirle usar matrices de expresiones regulares, y otra regla para la negación de las expresiones regulares:
$("password").rules("add", {
regex: [
/^[a-zA-Z'.\s]{8,40}$/,
/^.*[a-z].*$/,
/^.*[A-Z].*$/,
/^.*[0-9].*$/
],
'!regex': /password|123/
});
Pero implementarlas quizás sea demasiado.
Lo hice funcionar así:
$.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'
}
}
});
});
Asegúrese de que la expresión regular esté entre / :-)
Puede usar pattern definido en el archivo additional-methods.js . Tenga en cuenta que este archivo Additional-Methods.js debe incluirse después de jQuery Validar dependencia, entonces puede usar
$("#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>
Este es el código de trabajo.
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;
}
});
}
utilizamos principalmente la notación de marcado del complemento de validación jquery y las muestras publicadas no funcionaron para nosotros, cuando las banderas están presentes en la expresión regular, por ejemplo,
<input type="text" name="myfield" regex="/^[0-9]{3}$/i" />
por lo tanto, usamos el siguiente fragmento
$.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."
);
Por supuesto, ahora se podría combinar este código, con uno de los anteriores para permitir también pasar objetos RegExp al complemento, pero como no lo necesitábamos, dejamos este ejercicio para el lector ;-).
PD: también hay un complemento incluido para eso, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js
Esto funcionó para mí, siendo una de las reglas de validación:
Zip: {
required: true,
regex: /^\d{5}(?:[-\s]\d{4})?$/
}
Espero que ayude
