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>

具体效果如下

现在是输入内容不希望显示错误提示我现在的问题是，输入相应的内容，会有错误的提示，效果见下

目的：输入内容不提示错误，点击立即注册，如果不符合相应的规范，再提示错误。求指点，谢谢

问题解答

也是醉了。。。<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。