您的位置:首页技术文章
文章详情页

html - form 表单 用户名提示和错误提示分开显示?

【字号: 日期:2024-03-16 14:50:19浏览:93作者:猪猪

问题描述

点击输入框,显示用户名提示,点击立即注册按钮,在输入框下显示错误提示

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

具体效果如下

html - form 表单 用户名提示和错误提示分开显示?

现在是输入内容不希望显示错误提示我现在的问题是,输入相应的内容,会有错误的提示,效果见下html - form 表单 用户名提示和错误提示分开显示?

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

问题解答

回答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。

标签: HTML
相关文章: