html - form 表單 用戶名提示和錯誤提示分開顯示?
問題描述
點擊輸入框,顯示用戶名提示,點擊立即注冊按鈕,在輸入框下顯示錯誤提示
<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位中文數字與英文字母組成!</span></span> </p> <p ng-if='checkForm.account.$blured==true'><p ng-show='checkForm.account.$blured'> <i></i> <span>!支持中文、字母、數字、“-”“_”的組合,4-20個字符</span></p> </p>
具體效果如下
現在是輸入內容不希望顯示錯誤提示我現在的問題是,輸入相應的內容,會有錯誤的提示,效果見下
目的:輸入內容不提示錯誤,點擊立即注冊,如果不符合相應的規范,再提示錯誤。求指點,謝謝
問題解答
回答1:也是醉了。。。<input type='text' placeholder='您的賬戶名和登錄名'
ng-model='account' ng-pattern='regularList.account'/>
<span ng-show='showAccountError' role='alert'>
<span style='color: #ff0000'>用戶名為4-20位中文數字與英文字母組成!</span>
</span>當用戶提交的時候,在controller中用正則判斷$scope.account是否合法,不合法的話,就讓$scope.showAccountError=true.在頁面初始化的時候給這個變量賦false。
相關文章:
1. 視頻文件不能播放,怎么辦?2. 前端 - 誰來解釋下這兩個 CSS selector 區別3. javascript - 求幫助 , ATOM不顯示界面!!!!4. javascript - ios返回不執行js怎么解決?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. html5 - HTML代碼中的文字亂碼是怎么回事?7. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?8. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處9. javascript - vue2如何獲取v-model變量名10. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示
