提交前表单输入检查

Form input check before submit

本文关键字:检查 输入 表单 提交      更新时间:2024-01-11

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

但我现在遇到的问题是,用户仍然可以点击保存按钮,但它没有像我上面描述的那样检查条件。

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

尚未对此进行测试,但您的ng模型似乎为捕获的每个属性使用了一个对象"user",而您的ng提交条件没有考虑到这一点。不确定这是否是问题所在,但这是您可能想检查的一件事。

看起来你也可以做一些类似addUser的事情$有效,而不是进行全面检查。您还可以使用禁用提交按钮

ng disabled="addUser.$invalid"。

以下是教程:https://scotch.io/tutorials/angularjs-form-validation