Riepilogo della validazione del modulo Validform

Nelle ultime progetti, è stato utilizzato il validazione del modulo, è stato scelto Validform_v5.3.2.

Prima di tutto, scopriamo alcuni parametri di base:

Metodo di validazione del modulo universale:

Demo:

$(".demoform").Validform({//$(".demoform") indica quale modulo deve essere verificato, il nome deve essere aggiunto al modulo form;
btnSubmit: "#btn_sub", //#btn_sub è il pulsante che deve essere collegato all'evento di invio del modulo; se il modulo contiene un pulsante submit, questo parametro può essere omesso;
btnReset: ".btn_reset",//Opzione facoltativa .btn_reset è il pulsante che deve essere collegato all'evento di ripristino del modulo;
tiptype: 1, //Opzione facoltativa 1=>finestra pop-up, 2=>indicazione laterale (parent.next.find; con pop-up predefinito), 3=>indicazione laterale (sibling; con pop-up predefinito), 4=>indicazione laterale (sibling; senza pop-up), predefinito 1, può anche essere passata una funzione per personalizzare il modo di visualizzazione delle informazioni di avviso (può essere implementato qualsiasi effetto desiderato, vedere demo per dettagli);
ignoreHidden: false,//Opzione facoltativa true | false predefinito false, quando è true, non viene eseguita la verifica sugli elementi :hidden;
dragonfly: false,//Opzione facoltativa true | false predefinito false, quando è true, non viene eseguita la verifica se il valore è vuoto;
tipSweep: true,//Opzione facoltativa true | false predefinito false, verifica solo quando si invia il modulo, l'evento blur non innoccherà la verifica (la verifica in tempo reale viene eseguita in background, senza visualizzare i risultati della verifica);
label: ".label",//Opzione facoltativa Selezionatore, senza assegnare nullmsg, cerca il testo da visualizzare, predefinito ".Validform_label" sotto il testo;
showAllError: false,//Opzione facoltativa true | false, true: quando si invia il modulo, tutte le informazioni di errore verranno visualizzate, false: viene fermato il controllo degli elementi successivi non appena viene rilevato un errore di validazione, viene visualizzato solo l'errore dell'elemento corrente;
postonce:true, //Opzionale: il modulo può essere inviato una sola volta, true abilita, non compilato di default disabilita;
ajaxPost:true, //Utilizza il metodo ajax per inviare i dati del modulo, predefinito false, l'indirizzo di invio è l'indirizzo specificato da action;
datatype:{//Inserire il tipo di datatype personalizzato, può essere una espressione regolare o una funzione (la funzione riceverà un parametro);
"*6-20": /^[^\s]{6,20}$/,
"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username":function(gets,obj,curform,regxp){
//Il parametro gets è il valore dell'elemento modulo ricevuto, obj è l'elemento modulo corrente, curform è il modulo corrente in verifica, regxp è un riferimento a alcune espressioni regolari integrate;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){return true;}
if(reg2.test(gets)){return true;}
return false;
//Attenzione: return può restituire true o false o una stringa di testo, true indica che la verifica è riuscita, una stringa restituita indica che la verifica è fallita, la stringa viene visualizzata come messaggio di errore, se restituisce false viene utilizzato errmsg o il messaggio di errore predefinito;
}
"phone":function(){
//Dalla versione 5.0 in poi, per implementare l'effetto di verifica a scelta tra due opzioni, il nome di datatype non deve iniziare con "option_"; 
}
}
usePlugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
selector:"select,input"
}
}
beforeCheck:function(curform){
//Funzione eseguita prima della verifica dell'inviodel modulo, il parametro curform è l'oggetto modulo corrente.
//Se specificato return false, non verrà eseguita la verifica; 
}
beforeSubmit:function(curform){
//Funzione eseguita prima dell'inviodel modulo, dopo il successo della verifica, il parametro curform è l'oggetto modulo corrente.
//Se specificato return false, il modulo non verrà inviato; 
}
callback:function(data){
//I dati di ritorno data sono in formato json, {"info":"demo info","status":"y"}
//info: Output del messaggio di avviso;
//status: Restituisce lo stato del dati di invio, se l'invio è stato completato con successo. Può essere rappresentato da "y" per indicare un invio di successo, "n" per indicare un invio fallito, i caratteri specifici definiti nel file di dati di ritorno di ajax_post.php, principalmente utilizzati nel callback per eseguire operazioni di callback corrispondenti;
//Puoi anche ottenere ulteriori informazioni nel file ajax_post.php e eseguire operazioni corrispondenti qui;
//Quando l'ajax incontra un errore del server, viene eseguito anche il callback, in questo caso il parametro data è { status:**, statusText:**, readyState:**, responseText:** };
//Esegui l'operazione di callback qui;
//Attenzione: Se non si invia il modulo tramite ajax, viene passato il callback, in questo caso il parametro data è l'oggetto del modulo corrente, la funzione di callback viene eseguita dopo che la validazione del modulo è stata completata, quindi si giudica se il modulo deve essere inviato, se nel callback viene esplicitamente restituito false, il modulo non viene inviato, se viene restituito true o non viene restituito nulla, il modulo viene inviato.
}
});
Metodi e attributi dell'oggetto Validform：
tipmsg： Messaggio di avviso personalizzato, tramite la modifica del valore dell'attributo di questo oggetto Validform, è possibile utilizzare testi di avviso diversi per moduli diversi sulla stessa pagina;
dataType： Ottieni alcune espressioni regolari integrate;
eq(n)： Ottieni l'elemento n-esimo dell'oggetto Validform;
ajaxPost(flag,sync,url)： Invia il modulo in modo ajax. Se flag è true, salta la validazione e invia direttamente, se sync è true, il submit ajax viene eseguito in modo sincrono, se viene passato l'indirizzo URL, il modulo verrà inviato a quell'indirizzo;
abort()： Interrompe l'invio ajax;
submitForm(flag,url)： Invia il modulo nel modo impostato dai parametri, se flag è true, salta la validazione e invia direttamente, se viene passato l'indirizzo URL, il modulo verrà inviato a quell'indirizzo;
resetForm()： Resetta il modulo;
resetStatus()： Resetta lo stato di invio del modulo. Se viene passato il parametro postonce, lo stato del modulo viene impostato su "posted" dopo un invio di successo, il reset dello stato di invio permette al modulo di essere inviato di nuovo;
getStatus()： Ottieni lo stato di invio del modulo, normal: non inviato, posting: in fase di invio, posted: inviato con successo;
setStatus(status): imposta lo stato di submit del modulo, può essere impostato su normal, posting, posted tre stati, senza parametri impostati su posting per impostazione predefinita, questo stato il modulo può essere verificato ma non può essere inviato;
ignore(selector): ignora la verifica per l'oggetto selezionato;
unignore(selector): riottenere l'effetto di verifica per gli oggetti ignorati dal metodo ignore;
addRule(rule): è possibile aggiungere regole di verifica al modulo element tramite questo metodo dell'oggetto Validform;
check(bool,selector): verifica l'oggetto specificato (per impostazione predefinita verifica l'intero modulo corrente), restituisce true se valido, altrimenti restituisce false (legato all'oggetto di verifica in tempo reale, formato conforme restituisce true senza aspettare il risultato del return ajax), bool è true allora verifica senza mostrare messaggi di avviso;
config(setup): è possibile modificare i parametri di inizializzazione tramite questo metodo, specificare l'indirizzo di submit del modulo, impostare i parametri per il submit ajax e la verifica in tempo reale del modulo;

Di seguito è riportato il link di download dell'indirizzo demo, chiunque ne abbia bisogno può scaricarlo.

Indirizzo di download demo

Come sopra descritto, l'editor ha presentato una panoramica del Validform form validation, sperando che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento, l'editor risponderà tempestivamente. In questo momento, anche un grande ringraziamento per il supporto del sito tutorial urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta agli autori originali, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale connessa. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.