html - form 表单 用户名提示和错误提示分开显示?
PHP中文网
PHP中文网 2017-05-15 17:03:55
0
1
645

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

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

具体效果如下

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

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

PHP中文网
PHP中文网

认证高级PHP讲师

모든 응답(1)
左手右手慢动作

술에 취해도 마찬가지다. . .
<input type="text" class="form-control showHide" placeholder="계정 이름 및 로그인 이름"

으아악

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

으아악

</span>
사용자가 제출하면 컨트롤러에서 정규 표현식을 사용하여 $scope.account가 합법적이지 않은지 확인합니다. 페이지가 표시되면 $scope.showAccountError=true를 설정합니다. 초기화됩니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!