問題描述

點擊輸入框，顯示用戶名提示，點擊立即注冊按鈕，在輸入框下顯示錯誤提示

<form 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' 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 ng-message='required' style='color: #ff0000'>用戶名不能為空</span></span><span ng-messages='checkForm.account.$blured && checkForm.account.$error' role='alert'> <span ng-message='pattern'style='color: #ff0000'>用戶名為4-20位中文數(shù)字與英文字母組成！</span></span> </p> <p ng-if='checkForm.account.$blured==true'><p ng-show='checkForm.account.$blured'> <i></i> <span>!支持中文、字母、數(shù)字、“-”“_”的組合，4-20個字符</span></p> </p>

具體效果如下

現(xiàn)在是輸入內(nèi)容不希望顯示錯誤提示我現(xiàn)在的問題是，輸入相應(yīng)的內(nèi)容，會有錯誤的提示，效果見下

目的：輸入內(nèi)容不提示錯誤，點擊立即注冊，如果不符合相應(yīng)的規(guī)范，再提示錯誤。求指點，謝謝

問題解答

也是醉了。。。<input type='text' placeholder='您的賬戶名和登錄名'

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

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

<span style='color: #ff0000'>用戶名為4-20位中文數(shù)字與英文字母組成！</span>

</span>當(dāng)用戶提交的時候，在controller中用正則判斷$scope.account是否合法，不合法的話，就讓$scope.showAccountError=true.在頁面初始化的時候給這個變量賦false。