如何验证在Ionic输入字段完成后显示错误

时间:2016-01-13 07:07:43

标签: jquery html angularjs ionic

*您好, 我是angularJS的新手。现在我试图在输入完整文本后显示错误。但是我在输入时输入错误信息在输入中输入文本。请帮助找出解决方案。提前谢谢。我的代码是

<label class="item item-input" class="form-group" data-ng-class="   {'has-error':!myForm.zipCode.$valid}">
<span class="input-label">Zip Code</span>
<input type="text" ng-model="currentUser.zipCode"  class="form-control" id="zipCode" name="zipCode"  ng-pattern="/^(\d{5}-\d{4}|\d{5})$/" required="" >
</label>
<span   ng-show="myForm.zipCode.$error.pattern" class="help-block"   style="color:red;" role="alert">Please enter proper Zip Code</span>*

1 个答案:

答案 0 :(得分:1)

<form role="form" name="myForm" novalidate="">

        <div class="form-group" data-ng-class="{'has-error':!myForm.zipCode.$valid && myForm.zipCode.$dirty}">

            <label for="zipCode">Zip Code</label>
                <input type="text" class="form-control" id="zipCode" name="zipCode" ng-model="auth.zip" ng-pattern="/^(\d{5}-\d{4}|\d{5})$/" required="">
        </div>


        <div data-ng-show="myForm.zipCode.$error.required && myForm.zipCode.$dirty " class="alert alert-danger alert-   dismissible" role="alert">
            <strong>Zip Code is Required</strong> 
        </div>

        <div data-ng-show="myForm.zipCode.$error.pattern" class="alert alert-danger alert-dismissible" role="alert">
            <strong>Please enter proper Zip Code</strong> 
        </div>

    </form>

第一次加载表单时使用$dirty。它会false,所以你的工作已经完成了