html - bentuk gesaan nama pengguna dan gesaan ralat dipaparkan secara berasingan?

Question

Klik kotak input untuk memaparkan gesaan nama pengguna Klik butang Daftar Sekarang untuk memaparkan gesaan ralat di bawah kotak input

<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>

Kesan khusus adalah seperti berikut

Sekarang saya memasukkan kandungan dan saya tidak mahu mesej ralat dipaparkan
Masalah semasa saya ialah apabila saya memasukkan kandungan yang sepadan, akan ada mesej ralat Kesannya adalah seperti berikut

Tujuan: Tiada ralat akan digesa semasa memasukkan kandungan Klik untuk mendaftar dengan segera Jika ia tidak memenuhi spesifikasi yang sepadan, ralat akan digesa semula.
Sila beri saya nasihat, terima kasih

Answer 1

Mabuk juga. . .
<input type="text" class="form-control showHide" placeholder="Nama akaun dan nama log masuk anda"

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

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

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

</span>
Apabila pengguna menyerahkan, gunakan ungkapan biasa dalam pengawal untuk menentukan sama ada $scope.account sah Jika ia tidak sah, tetapkan $scope.showAccountError=true halaman dimulakan.