1. Lorsque le contenu saisi dans la zone de saisie n'est pas standardisé et que le formulaire est soumis, la zone de saisie affichera une erreur et la bordure p extérieure de la saisie deviendra rouge lorsque je ressaisirai la saisie. box, le premier À partir du premier caractère saisi, la couleur de la bordure p extérieure devient la couleur normale.
Ce qui suit est le code
<form action="" class="signup_form" method="post" name="checkForm" ng-init="isEmpty=false;">
<p class="form_item form_item_account">
<label for=""> 用 户 名 </label>
<input type="text" class="form_account" placeholder="您的账户名和登录名"
id="form_item_account"
ng-model="account"
name="account"
required
ng-pattern="regularList.account"
ng-class="{'warnning':checkForm.account.$focused,'error':(!isEmpty && checkForm.account.$blured &&
checkForm.account.$error.pattern) || (isEmpty && checkForm.account.$invalid)}"
ng-blur="checkForm.account.$blured = true;checkForm.account.$focused = false;"
ng-focus="checkForm.account.$focused = true;checkForm.account.$blured = false;accountValid()"
autocomplete="off"
>
<i></i>
</p>
<p class="form_item">
<button class="btn_register" id="btn_register" ng-click="isEmpty=true; confirm()">立即注册</button>
<i></i>
</p>
</form>
Ajoutez la classe form_item_error dans js, et la bordure p extérieure de la zone de saisie devient rouge. Supprimez cette classe et la bordure p extérieure devient normale
.function checkError(form){
var item = form.parent();
if(form.hasClass("error")){
item.addClass("form_item_error");
}else if(item.hasClass("form_item_error")){
item.removeClass("form_item_error");
}else{
item.removeClass("form_item_error");
}
}
$scope.confirm = function () {
$scope.accountValid = function(){
checkError(form_account);
}
}
Effet
Erreur
En cas d'erreur, saisissez le contenu et la bordure redeviendra normale
Merci de me donner quelques conseils, merci
J'ai mis votre code sur jsFiddle et j'ai apporté quelques modifications pour répondre à vos exigences. Si vous ne voyez pas l'effet, vous devez franchir le mur. La démo est la suivante, vous pouvez la prévisualiser vous-même et elle vous aide également à ajouter le bouton de soumission si le formulaire est incomplet.
Démo
Placez simplement ng-class dans p dans le package externe et ajoutez les styles correspondants à wanning et error