angulaire.js - zone de saisie, la bordure change avec une erreur ?
黄舟
黄舟 2017-05-15 17:04:04
0
2
938

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=""> 用&nbsp;&nbsp;户&nbsp;&nbsp;名 </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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

répondre à tous(2)
为情所困

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

PHPzhong

Placez simplement ng-class dans p dans le package externe et ajoutez les styles correspondants à wanning et error

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal