点击输入框,显示用户名提示,点击立即注册按钮,在输入框下显示错误提示
<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>
具体效果如下
现在是输入内容不希望显示错误提示
我现在的问题是,输入相应的内容,会有错误的提示,效果见下
目的:输入内容不提示错误,点击立即注册,如果不符合相应的规范,再提示错误。
求指点,谢谢
ringa_lee2017-05-15 17:05:55
也是醉了。。。
<input type="text" class="form-control showHide" placeholder="您的账户名和登录名"
ng-model="account"
ng-pattern="regularList.account"/>
<span ng-show="showAccountError" role="alert">
<span class="error_text" style="color: #ff0000">用户名为4-20位中文数字与英文字母组成!</span>
</span>
当用户提交的时候,在controller中用正则判断$scope.account是否合法,不合法的话,就让$scope.showAccountError=true.在页面初始化的时候给这个变量赋false。