javascript - 提交前检查表单输入

Question

我有这个模态形式来获取用户的输入。在提交用户表单之前，我想检查用户是否输入了用户名、姓名、密码、确认密码、状态和范围。请注意，状态位于单选按钮中，范围位于复选框中。

但我现在遇到的问题是，用户仍然可以单击“保存”按钮，但它不会检查我上面描述的条件。

  <div class="modal-body">
            <form name="addUser" ng-submit="(addUser.username.$valid && addUser.name.$valid && addUser.password.$valid &&
                        addUser.confirmpassword.$valid && addUser.status.$valid && addUser.scope.$valid) ? add() : '';">
                <div class="alert alert-danger" ng-if="hasError">
                    <button type="button" class="close" aria-hidden="true" ng-click="setError(false);">&times;</button>
                    <strong>Error!</strong> {{errorMessage}}
                </div>
                <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
                  <label class="control-label" for="username">Username</label>
                  <input class="form-control" name="username" ng-model="user.username" required>
                  <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
                  <label class="control-label" for="name">Name</label>
                  <input class="form-control"  name="name" ng-model="user.name" required>
                  <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';">
                    <label class="control-label" for="password">Password</label>
                    <input type="password" class="form-control" name="password"
                           ng-model="user.password" required ng-minlength="5">
                    <span class="glyphicon form-control-feedback"
                          ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';">
                    <label class="control-label" for="confirmpassword">Re-enter password</label>
                    <input type="confirmpassword" class="form-control" name="confirmpassword"
                           ng-model="user.confirmpassword" required ng-minlength="5">
                    <span class="glyphicon form-control-feedback"
                          ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.status.$valid ? 'has-success' : 'has-error';">
                    <label for="status">Status</label><br>
                    <input type="radio" ng-model="user.status" name="status" value="1"> Active
                    <input type="radio" ng-model="user.status" name="status" value="0"> Inactive<br>
                </div>
                <br>
                <div class="form-group has-feedback" ng-class="addUser.scope.$valid ? 'has-success' : 'has-error';">
                    <label for="scope">Scope</label><br>
                    <input type="checkbox" ng-model="user.scope.admin" name="scope[]" value="admin"> Admin <br>
                    <input type="checkbox" ng-model="user.scope.app" name="scope[]" value="app"> App <br>
                    <input type="checkbox" ng-model="user.scope.redemption" name="scope[]" value="redemption"> Redemption <br>
                    <br>
                </div>
                <div ng-switch on="isLoading">
                    <div ng-switch-when="true">
                        <button type="button" class="btn btn-primary btn-block disabled">Saving ...</button>
                    </div>
                    <div ng-switch-when="false">
                        <button type="submit" class="btn btn-primary btn-block" ng-click="add();" >Save</button>
                    </div>
                </div>
            </form>
        </div>

Answer 1

尚未对此进行测试，但看起来您的 ng-model 正在为捕获的每个属性使用对象“用户”，而您的 ng-submit 条件并未将其考虑在内。不确定这是否是问题所在，但这是一回事你可能想检查一下。

看起来您也可以执行诸如 addUser.$valid 之类的操作，而不是进行完整检查。您还可以尝试使用

禁用提交按钮

ng-disabled="addUser.$invalid"。

这是一个教程:https://scotch.io/tutorials/angularjs-form-validation