Détecter la validation selon laquelle le formulaire ne peut pas être vide (.notnull)
Fonction : lorsqu'il y a plusieurs formulaires (dont un) sous une paire de balises de formulaire qui doivent être soumis, utilisez js pour juger avec précision le bouton actuel et ces éléments
Utilisation : Recherchez le conteneur du formulaire actuel sous la balise form et donnez-lui class="form", et le bouton de soumission du formulaire actuel reçoit class="check"
Les éléments qui doivent être vérifiés comme vides reçoivent des invites class="notnull" nullmsg="xx ne peuvent pas être vides!", et les formulaires qui nécessitent un jugement logique reçoivent des invites class="need"
.
Le type de jugement est donné class="num" (ne peut être qu'un nombre) invite de vérification logicmsg="XX ne peut être qu'un nombre"
Donnez class="errorMessage" pour afficher le bloc de message d'erreur
Donnez class="warn" pour afficher le message d'erreur
Ne pas utiliser la programmation orientée objet js
Jugement logique, ne transmettez pas l'identifiant du besoin, donnez directement l'attribut d'expression régulière (personnalisé) regex="/^d$/" pour porter un jugement
Mis en œuvre en externe
Fonction de rappel du bouton Global.submitCallback
Global.confirmCallback confirme la fonction de rappel ;
Points à améliorer :
Aucun
///
*/
//$(document).ready(
// fonction () {
// $("form").find(".notnull").bind({
// focus : fonction () {
// if ($(this).attr("value") == this.defaultValue) {
// $(this).attr("value", "");
// }
// },
// flou : fonction () {
// if ($(this).attr("value") == "") {
// $(this).attr("value", this.defaultValue);
// }
// }
// });
// }
//);
///*Méthode pour encapsuler un formulaire de détection universel*/
///event.srcElement : L'objet cible qui déclenche l'événement, souvent utilisé pour les événements onclick.
///event.fromElement : La source de l'objet qui déclenche l'événement, souvent utilisée pour les événements onmouseout et onmouseover.
///event.toElement : La source cible vers laquelle la souris se déplace après le déclenchement de l'événement. Elle est souvent utilisée pour les événements onmouseout et onmouseover.
fonction Global() {
var _self = ceci;
>
Global.submitCallback = null;
Global.confirmCallback = null;
$(document).ready(function () {
//corps du formulaire
$("body").find(".form").each(function () {
This.onclick = fonction (e) {
var bouton = null;
essayez {
bouton = e.srcElement == null document.activeElement : e.srcElement;
} capture(e) {
console.log(e.message)
bouton = document.activeElement;
}
Si ($(bouton).is(".check")) {
//alerte("soumettre")
var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
if (sub) {
// Appelez notre rappel, mais en utilisant notre propre instance comme contexte
Global.submitCallback.call(this, [e]);
}
retourner le sous ;
} else if ($(button).is(".confirm")) {
//alerte("supprimer")
var sub = confirm($(button).attr("title"));
if (sub) {
Global.confirmCallback.call(this, [e]);
}
retourner le sous ;
} autre {
return true ;
}
>
});
/*Détecter les éléments qui ne peuvent pas être vides dans le formulaire*/
Formulaire de contrôle de fonction (formulaire) {
var b = vrai ;
$(form).find(".notnull").each(function () {
Si ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue
à travers
//
//
//alerte($(this).attr("msg"))
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
Si (b == vrai) {
$(form).find(".warn").text("");
$(form).find(".errorMessage").hide();
>
retourner b;
>
/*Liste déroulante obligatoire dans le formulaire de détection*/
Fonction checkselect(form) {
var b = vrai ;
$(form).find(".select").each(function (i) {
var ck = $(this).find('option:selected').text();
Si (ck.indexOf("select") > -1) {
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
retourner b;
>
/*Cochez les cases requises dans le formulaire de détection*/
Fonction checkChecked(form) {
var b = vrai ;
$(form).find(".checkbox").each(function (i) {
var ck = $(this)[0].checked;
if (!ck) {
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
retourner b;
>
//Vérifie si cela correspond à l'expression régulière
Fonction GetFlase(value, reg, ele) {
Si (reg.test(value)) {
return true ;
>
$(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
$(ele).parents(".form").find(".errorMessage").show();
$(ele).focus();
$(ele).select();
return false ; //Impossible de soumettre
>
Fonction CheckInputRex(formulaire) {
var b = vrai ;
$(form).find("input[type='text']").each(function () {
If (typeof ($(this).attr("regex")) == 'string') {
Si ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//La valeur du formulaire actuel
var valeur = $(this).attr("value") || $(this).val();
var regx = eval($(this).attr("regex"));
return b = GetFlase(value, regx, this);
}
}
});
retourner b;
>
///Vérifie si les caractères correspondants saisis par l'utilisateur sont légaux
///Cette méthode est obsolète
Fonction CheckInput(formulaire) {
var b = vrai ;
$(form).find(".need").each(function () {
Si ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//La valeur du formulaire actuel
var valeur = $(this).attr("value");
//La valeur de l'identifiant ou la valeur de l'attribut name est telle que : [name="contact"]
var nom = $(this).attr("class");
// Vérifiez si le contenu à saisir est légal, tel que : Coordonnées
var len = name.split(" ");
pour (var i = 0; i < len.length; i ) {
changer ($.trim(len[i])) {
cas "mobile":
var reg = /^1d{10}$/;
Retour b = GetFlase(value, reg, this);
pause;
cas "email":
var reg = /^[w-] (.[w-] )*@[w-] (.[w-] ) $/;
Retour b = GetFlase(value, reg, this);
pause;
///Les deux mots de passe sont-ils cohérents ?
cas "mot de passe":
pause;
cas "mot de passe2":
Si ($("#password").attr("value") != $("#password2").attr("value")) {
$(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
}
pause;
cas "worktel":
case "hometel": //Numéro de téléphone personnel
var reg = /^d{8}$/;
Retour b = GetFlase(value, reg, this);
pause;
case "post": //Code postal
var reg = /^d{6}$/;
Retour b = GetFlase(value, reg, this);
pause;
cas "bonus":
case "allocation":
cas "FixedSalary":
var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0 |0|[1-9]d)$/;
Retour b = GetFlase(value, reg, this);
pause;
cas "identité":
var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
Retour b = GetFlase(value, reg, this);
pause;
cas "hauteur":
var reg = /^[1-2][0-9][0-9]$/;
return b = GetFlase(value, reg, this);
pause;
cas "qq":
var reg = /^[1-9][0-9]{4,}$/;
return b = GetFlase(value, reg, this);
pause;
cas "begintime":
cas "heure de fin":
var reg = /^d{4}$/;
if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {
retourner b;
>
$.ligerDialog.alert($(this).attr("msg"))
$(this).select(); //获取焦点
retourner b = faux ; //不能提交
pause;
cas "num":
var reg = /^d $/;
return b = GetFlase(value, reg, this);
pause;
///大陆行证和香港的签注.
///14/15 7 chiffres, G 8 chiffres ;
///Le commun est : P. 7 chiffres ;
///À des fins officielles : S. 7 chiffres ou
//S 8 chiffres, commençant par D est un passeport diplomatique
case "postport": //Numéro de passeport
var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd |1[4,5]d{7})$/;
Retour b = GetFlase(value, reg, this);
pause;
cas "compte bancaire":
var reg = /^[0-9]{19}$/;
Retour b = GetFlase(value, reg, this);
pause;
} //changer
//pour
}
});
retourner b;
>
///Cette méthode est obsolète
});
///Cliquez pour changer la couleur de fond
$(document).ready(function () {
var inputs = $("#top>.c>input");
$(inputs).each(function () {
This.onclick = function () {
document.getElementById("main").style.backgroundColor = this.name;
//$("#main").backgroundColor = this.name;
>
});
});
Le code ci-dessus est la méthode de détection de formulaire universelle encapsulée. J'espère qu'il vous plaira
.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
