html - l'invite de nom d'utilisateur et l'invite d'erreur du formulaire sont affichées séparément ?

Question

Cliquez sur la zone de saisie pour afficher l'invite du nom d'utilisateur. Cliquez sur le bouton S'inscrire maintenant pour afficher une invite d'erreur sous la zone de saisie

<form class="form-horizontal" name="checkForm" ng-init="isEmpty=false;">
    <p class="form-group">
        <label class="col-sm-3 control-label">用 户 名</label>
        <p class="col-sm-8 account">
            <input type="text" class="form-control showHide" placeholder="您的账户名和登录名"
                ng-model="account"
                name="account"
                required="required"
                ng-pattern="regularList.account"
                ng-blur="checkForm.account.$blured = false;"
                ng-focus="checkForm.account.$blured = true;"
                autocomplete="off"/>
            <span ng-class="{'right':(checkForm.account.$error.pattern),'error':checkForm.account.$valid}"></span>
        </p>
        <span ng-messages="isEmpty && checkForm.account.$blured && checkForm.account.$error" role="alert">
            <span class="error_text" ng-message="required" style="color: #ff0000">用户名不能为空</span>
        </span>
        <span ng-messages="checkForm.account.$blured && checkForm.account.$error" role="alert">
            <span class="error_text" ng-message="pattern"style="color: #ff0000">用户名为4-20位中文数字与英文字母组成！</span>
        </span>
    </p>
    <p class="tip-container" ng-if="checkForm.account.$blured==true">
        <p class="input-tip" ng-show="checkForm.account.$blured">
            <i></i>
            <span>!支持中文、字母、数字、“-”“_”的组合，4-20个字符</span>
        </p>
    </p>

Les effets spécifiques sont les suivants

Maintenant, je saisis du contenu et je ne veux pas qu'un message d'erreur s'affiche
Mon problème actuel est que lorsque je saisis le contenu correspondant, il y aura un message d'erreur. L'effet est le suivant

Objectif : aucune erreur ne sera demandée lors de la saisie du contenu. Cliquez pour vous inscrire immédiatement. S'il ne répond pas aux spécifications correspondantes, une erreur sera à nouveau affichée.
S'il vous plaît, donnez-moi quelques conseils, merci

Answer 1

Ivre aussi. . .
<input type="text" class="form-control showHide" placeholder="Votre nom de compte et nom de connexion"

            ng-model="account"
            ng-pattern="regularList.account"/>

<span ng-show="showAccountError" role="alert">

        <span class="error_text" style="color: #ff0000">用户名为4-20位中文数字与英文字母组成！</span>

</span>
Lorsque l'utilisateur soumet, utilisez des expressions régulières dans le contrôleur pour déterminer si $scope.account est légal. Si ce n'est pas légal, définissez $scope.showAccountError=true. la page est initialisée. La variable est affectée à false.