角js验证不使用自己的指令。

Question

我使用的是角js指令，但它不起作用，可以知道我做错了什么，我遵循角js文档，但没有工作，是否存在任何库，所需的是我的形式中的错误。

loginView.html

<form class="form-horizontal" name="user_form" novalidate ng-submit='login()'>
                <div class="modal-header">
                    <h3>Login</h3>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="login-Name" class="col-lg-3 form-label">User Name:</label>
                        <div class="col-lg-8">
                            <input type="email" class="form-control" id="login-Name" ng-model="user.username" name="login-Name" placeholder="User Name" required/>
                            <div class="error" ng-show="user_form.login-Name.$dirty && user_form.login-Name.$invalid">
                                <small class="error" ng-show="user_form.login-Name.$error.required">
                                    User name is required.
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="login-Password" class="col-lg-3 form-label">Password:</label>
                        <div class="col-lg-8">
                            <input type="password" class="form-control" id="login-Password" ng-model="user.password" name="login-Password" placeholder="Password" ng-minlength=6 ng-maxlength=20 required/>
                            <div class="error" ng-show="user_form.login-Password.$dirty && user_form.login-Password.$invalid">
                                <small class="error" ng-show="user_form.login-Password.$error.required">
                                    Your Password is required.
                                </small>
                                <small class="error" ng-show="user_form.login-Password.$error.minlength">
                                    Your Password is required to be at least 6 characters
                                </small>
                                <small class="error" ng-show="user_form.login-Password.$error.maxlength">
                                    Your Password cannot be longer than 20 characters
                                </small>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-user icon-white"></i> Login
                    </button>
                </div>

            </form>

Answer 1

代码中有两个错误。

首先，在您的字段id (登录名和登录密码)中使用-。用_ (login_Name和login_Password)替换它们。Angularjs将它们看作子字符串操作符，不返回要在ng-show指令中计算的对象。

对于用户名(电子邮件地址)，您的错误将永远不会显示，因为当字段不为空时，$error.required设置为false，如果字段为空，则$dirty设置为false。您的两个条件不能同时为真。

对于密码，所需字段也有相同的问题，但如果更改id，则其他两个验证将有效。

工作示例：柱塞