Le modèle de stratégie définit une famille d'algorithmes et les encapsule séparément afin qu'ils puissent être remplacés les uns par les autres. Ce modèle rend les changements d'algorithme indépendants des clients qui utilisent le calcul.
Définissez d'abord un formulaire de saisie simple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-">
<style>
.form{
width: px;
height: px;
#margin: px auto;
}
.form-item-label{
width:px;
text-align: right;
float: left;
}
.form-item-input{
float: left;
}
.form-item{
width: % ;
height: px;
line-height: px;
}
</style>
</head>
<body>
<div class='form'>
<div class="form-item">
<div class='form-item-label'><span>用户名：</span></div>
<div class='form-item-input'><input id='userName' name='用户名' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>密码：</span></div>
<div class='form-item-input'><input id='password' name='密码' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>确认密码：</span></div>
<div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>
</div>
<div class="form-item" >
<div class='form-item-label'><span>邮箱：</span></div>
<div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>
</div>
</div>
<br>
<button id='submit' >提交</button>
<script type='text/javascript' src="../reference/jquery-...min.js"></script>
</body>
</html>Généralement, dans l'action de soumission après avoir modifié les informations sur la page, les informations saisies doivent être vérifiées. Vous verrez qu'une grande partie du code responsable de la vérification est écrite dans la fonction de soumission ou dans une fonction de vérification indépendante.
Par exemple, comme ci-dessous.
$(document).ready(function(){
$('#submit').bind('click', doSubmit);
});
function doSubmit(){
var eleUserName = document.getElementById('userName');
if(eleUserName.value === '') {
alert('用户名不能为空');
return;
}
if(eleUserName.length < 6) {
alert('用户名长度不能少于6个字符');
return;
}
if(eleUserName.length > 6) {
alert('用户名长度不能多于20个字符');
return;
}
}Cette méthode d'écriture peut certainement répondre aux exigences fonctionnelles, mais il y aura plusieurs problèmes :
1. Si je veux l'utiliser sur d'autres pages, je dois copier le code. La soi-disant réutilisation devient une copie, et il y aura beaucoup de duplication du code. Les meilleurs classeront et conditionneront le code de contrôle, mais il y aura davantage de duplications.
2. Si je souhaite ajouter une vérification d'entrée, alors je dois modifier directement la fonction de soumission. Cette fonction sera gonflée et détruira le principe "d'ouverture et de fermeture".
3. Si vous modifiez la fonction de soumission, vous devez couvrir tous les tests de conception de la fonction, car vous ne savez pas quand des changements erronés ou des situations inconnues se produiront.
Étapes de transformation :
1. Traitez chaque logique de vérification comme une stratégie de vérification et encapsulez chaque fonction de stratégie de vérification. Les paramètres de la fonction doivent être cohérents et peuvent accepter des éléments DOM, des valeurs vérifiées, des messages d'erreur et des paramètres personnalisés.
2. Définissez le validateur, vous pouvez importer la fonction de stratégie de validation ou l'ajouter.
3. Le validateur fournit une méthode de vérification pour appeler pendant la vérification et appelle en interne une fonction de stratégie de vérification spécifique.
4. Vérifiez l'appel.
Étape 1.
Considérez chaque if comme une règle métier de vérification, traitez chaque règle métier comme une fonction stratégique distincte et encapsulez toutes les fonctions stratégiques dans un objet stratégique.
var validationStrategies = {
isNoEmpty: function(element, errMsg, value) {
if(value === '') {
return this.buildInvalidObj(element, errMsg, value );
}
},
minLength: function(element, errMsg, value, length) {
if(value.length < length){
return this.buildInvalidObj(element, errMsg, value);
}
},
maxLength: function(element, errMsg, value, length) {
if(value.length > length){
return this.buildInvalidObj(element, errMsg, value);
}
},
isMail: function(element, errMsg, value, length) {
var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if(!reg.test(value)){
return this.buildInvalidObj(element, errMsg, value);
}
}
};Les trois premiers paramètres de toutes les fonctions sont cohérents et requis, indiquant l'élément DOM vérifié, le message d'erreur et la valeur vérifiée. Le quatrième commence par les propres règles de vérification de la fonction pour déterminer les paramètres personnalisés.
La méthode "buildInvalidObj" convertit simplement les trois premiers paramètres en un objet d'erreur et le renvoie. Cet objet d'erreur sera renvoyé tant que la vérification échoue.
Selon le principe d'inversion de dépendance, les modules de haut niveau ne doivent pas dépendre des modules de bas niveau, ils ne peuvent donc pas être utilisés directement par l'appelant de vérification.
Encapsulation et abstraction via des validateurs.
Étape 2 :
Définissez le validateur, vous pouvez y importer toutes les stratégies de vérification, ou vous pouvez ajouter les fonctions de stratégie de vérification séparément.
//输入验证器
function InputValidators(){
this.validators = [];
this.strategies = {};
}
//从策略对象导入验证策略函数
//参数:
// strategies: 包含各种策略函数的对象
InputValidators.prototype.importStrategies = function(strategies) {
for(var strategyName in strategies) {
this.addValidationStrategy(strategyName, strategies[strategyName]);
}
};
//添加验证策略函数
//参数:
// name: 策略名称
// strategy: 策略函数
InputValidators.prototype.addValidationStrategy = function(name, strategy){
this.strategies[name] = strategy;
};Étape 3 :
Ajoutez une méthode de vérification pour accepter les appels externes.La première règle de paramètre est définie sur une règle de vérification, telle que "minLength:6". Le code suivant générera un appel à la fonction de stratégie spécifique. L'appel sera poussé dans le cache et attendra d'être appelé ensemble.
":6" indique les paramètres personnalisés par la fonction stratégie selon ses propres règles.
//添加验证方法
//参数:
// rule: 验证策略字符串
// element: 被验证的dom元素
// errMsg: 验证失败时显示的提示信息
// value: 被验证的值
InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {
var that = this;
var ruleElements = rule.split(":");
this.validators.push(function() {
var strategy = ruleElements.shift();
var params = ruleElements;
params.unshift(value);
params.unshift(errMsg);
params.unshift(element);
return that.strategies[strategy].apply(that, params);
});
};
//开始验证
InputValidators.prototype.check = function() {
for(var i = 0, validator; validator = this.validators[i++];){
var result = validator();
if(result) {
return result;
}
}
};Étape 4 :
Lorsque la vérification est requise, créez d'abord un nouvel objet validateur.
var validators = new InputValidators();
validators.importStrategies(validationStrategies);
validators.addValidationStrategy('isEqual', function(element, errMsg, value1, value2) {
if(value1 !== value2) {
return this.buildInvalidObj(element, errMsg, value1 );
}
});
var eleUserName = document.getElementById('userName');
validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value);
validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
var elePassword = document.getElementById('password');
validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value);
validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
var eleRepassword = document.getElementById('repassword');
validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value);
validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value);
var eleMail = document.getElementById('mail');
validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value);
validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);check renvoie un objet d'erreur. Nous pouvons utiliser cet objet pour effectuer uniformément des opérations d'invite sur les éléments DOM après la vérification, telles que définir le focus, sélectionner le contenu ou envelopper une couche de style rouge à l'extérieur de la zone de saisie.
var result = validators.check();
if(result){
alert(result.errMsg);
result.element.focus();
result.element.select();
return false;
}Tous les codes :
Ce qui précède est l'intégralité du contenu du modèle de conception javascript introduit par l'éditeur - vérification de l'entrée du modèle de stratégie. J'espère que vous l'aimerez.
La différence entre insérer avant et avant
Écran gelé de l'ordinateur bloqué
Comment résoudre l'exception de lecture de fichiers volumineux Java
Introduction à l'utilisation du code complet VBS
Analyse coût-efficacité de l'apprentissage de Python et C++
Que signifie le système d'exploitation DOS ?
esd en iso
Introduction à l'utilisation de la fonction MySQL ELT
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
