首页 > input输入框 输入错误时,点击注册按钮,输入框的边框变成红色,重新输入时,边框颜色恢复原来的,同时错误提示消失?

input输入框 输入错误时,点击注册按钮,输入框的边框变成红色,重新输入时,边框颜色恢复原来的,同时错误提示消失?

若输入框有误,则点击立即注册,输入框的颜色会变成红色,在输入框中输入正确的值的过程中,输入框的边框变成正常的颜色。

<form action="" class="signup_form" method="post" name="checkForm" ng-init="isEmpty=false;">
    <div class="form_item  form_item_account">
        <label for=""> 用&nbsp;&nbsp;户&nbsp;&nbsp;名 </label>
        <input type="text" class="form_account" placeholder="您的账户名和登录名"
                id="form_item_account"
                ng-model="account"
                name="account"
                required
                ng-pattern="regularList.account"
                ng-class="{'warnning':checkForm.account.$focused,'error':(!isEmpty && checkForm.account.$blured &&
                 checkForm.account.$error.pattern) || (isEmpty && checkForm.account.$invalid)}"
                ng-blur="checkForm.account.$blured = true;checkForm.account.$focused = false;"
                ng-focus="checkForm.account.$focused = true;checkForm.account.$blured = false;accountValid()"
                autocomplete="off"
                >
        <i class="i_status" ng-show="checkFrom.account.$focused && checkForm.account.$viewValue && checkForm.account.$valid"></i>
    </div>
    <div class="tip_container">
        <div class="input_tip" ng-if="checkForm.account.$focused">
            <i></i>
            <span>支持中文、字母、数字、“-”“_”的组合,4-20个字符</span>
        </div>
        <div class="input_tip" ng-messages="isEmpty && !checkForm.account.$focused && checkForm.account.$error" role="alert">
            <span class="error_txt" ng-message="required"><i class="warn_error"></i>请输入用户名</span>
        </div>
        <div class="input_tip" ng-messages="checkForm.account.$blured && checkForm.account.$error" role="alert">
            <span class="error_txt" ng-message="pattren"><i class="warn_error"></i>请输入正确的用户名</span>
        </div>
        <div class="correct" ng-if="checkFrom.account.$blured && checkForm.account.$viewValue && checkForm.account.$valid">
            <span class="correct_text"></span>
        </div>
    </div>
    <div class="form_item">
                <button class="btn_register" ng-click="isEmpty=true; confirm()">立即注册</button>
                <i class="sign_loading"></i>
            </div>
</form>
.controller{
    var form_account = $("#form_item_account");
        var form_pwd = $("#form_item_password");
        function getStringLength(str){
            if(!str){
                return;
            }
            var bytesCount = 0;
            for(var i=0;i<str.length;i++){
                var c=str.charAt(i);
                if(/^[\u0000-\u00ff]&/.test(c)){
                    bytesCount+=1;
                }else{
                    bytesCount+=2;
                }
            }
            return bytesCount;
        }
        function onKeyupHandler(input,msg){
            var item = input.parent();
            if(!item.hasClass('form_item_error')){
                item.addClass('form_item_error');
            }

        }
        function hideError(input,msg){
            var item = input.parent();
            item.removeClass('form_item_error');
        }
        $scope.checkAcount = function(){
            var reg = /^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/;
            form_account.on('keyup',function(e){
                var value = $(this).val();
                hideError(form_account);
                if(value!='' && !reg.test(value)){
                    onKeyupHandler(form_account,errormsg)
                }
            })
        }
      $scope.confirm = function () {
            $scope.accountValid = function(){
                if($scope.checkForm.account.$error ){
                    $('#form_item_account').addClass('form_item_error');
                }
            }
}

        

求指点?
谢谢

【热门文章】
【热门文章】