Convalida jQuery: come aggiungere una regola per la convalida delle espressioni regolari?
https://stackoverflow.com/questions/280759
-
07-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto usando il jQuery plugin di validazione . Roba fantastica! Voglio migrare la mia soluzione ASP.NET esistente per usare jQuery invece dei validatori ASP.NET. Mi manca un sostituto per il validatore di espressioni regolari . Voglio essere in grado di fare qualcosa del genere:
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}<*>quot; })
Come aggiungere una regola personalizzata per raggiungere questo obiettivo?
Soluzione
Grazie alla risposta di redsquare ho aggiunto un metodo come questo:
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
ora tutto ciò che devi fare per convalidare contro qualsiasi regex è questo:
$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}<*>quot; })
Inoltre, sembra che esista un file chiamato additional-method.js che contiene il metodo "pattern", che può essere un RegExp quando creato usando il metodo senza virgolette.
http://bassistance.de/jquery-plugins/jquery-plugin-validation /
http://ajax.aspnetcdn.com/ajax/ jquery.validate / 1,9 / supplementare-methods.js
Altri suggerimenti
Puoi usare addMethod ()
ad esempio
$.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.');
buon articolo qui https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation- plugin /
Ho avuto dei problemi nel mettere insieme tutti i pezzi per fare un validatore di espressioni regolari jQuery, ma l'ho fatto funzionare ... Ecco un esempio di lavoro completo. Utilizza il plug-in "Convalida" che si trova in Plugin di convalida 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>
Nessun motivo per definire la regex come una stringa.
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var check = false;
return this.optional(element) || regexp.test(value);
},
"Please check your input."
);
e
telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 },
va meglio così, no?
Come menzionato nella documentazione addMethod :
Nota: mentre la tentazione è ottima di aggiungere un metodo regex che controlla il suo parametro rispetto al valore, è molto più pulito incapsulare quelle espressioni regolari all'interno del proprio metodo. Se hai bisogno di molte espressioni leggermente diverse, prova a estrarre un parametro comune. Una libreria di espressioni regolari: http://regexlib.com/DisplayPatterns.aspx
Quindi sì, devi aggiungere un metodo per ogni espressione regolare. Il sovraccarico è minimo, mentre ti consente di dare un nome alla regex (da non sottovalutare), un messaggio predefinito (utile) e la possibilità di riutilizzarlo in vari luoghi, senza duplicare più volte la regex stessa.
Estendendo un po 'la risposta di 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."
);
Questo ti permetterebbe di passare un oggetto regex alla regola.
$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ });
Il ripristino della proprietà lastIndex è necessario quando g -flag è impostato sull'oggetto RegExp . Altrimenti inizierebbe a convalidare dalla posizione dell'ultima corrispondenza con quella regex, anche se la stringa del soggetto è diversa.
Qualche altra idea che ho avuto è stata quella di consentirti di usare le matrici di regex e un'altra regola per la negazione di regex:
$("password").rules("add", {
regex: [
/^[a-zA-Z'.\s]{8,40}$/,
/^.*[a-z].*$/,
/^.*[A-Z].*$/,
/^.*[0-9].*$/
],
'!regex': /password|123/
});
Ma implementarli potrebbe essere troppo.
L'ho fatto funzionare in questo modo:
$.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'
}
}
});
});
Assicurati che la regex sia compresa tra / :-)
Puoi usare pattern definito nel file additional-methods.js . Nota che questo file additional-method.js deve essere incluso dopo jQuery Convalida la dipendenza, quindi puoi semplicemente usare
$("#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>
Questo è un codice funzionante.
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;
}
});
}
usiamo principalmente la notazione markup del plugin di validazione jquery e gli esempi pubblicati non hanno funzionato per noi, quando sono presenti flag nella regex, ad es.
<input type="text" name="myfield" regex="/^[0-9]{3}$/i" />
pertanto utilizziamo il seguente frammento
$.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."
);
Naturalmente ora si potrebbe combinare questo codice, con uno dei precedenti per consentire anche il passaggio di oggetti RegExp nel plugin, ma poiché non ne avevamo bisogno abbiamo lasciato questo esercizio per il lettore ;-).
PS: c'è anche un plugin in bundle per questo, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js
Questo ha funzionato per me, essendo una delle regole di validazione:
Zip: {
required: true,
regex: /^\d{5}(?:[-\s]\d{4})?$/
}
Spero che sia d'aiuto
