Javascript 提交前检查表单输入

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

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

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

&时代；
错误{{errorMessage}
用户名
名称
密码
重新输入密码
状态

活跃的
不活动的



范围

管理员

应用程序

赎回



保存。。。
拯救

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

看起来您还可以执行addUser.valid之类的操作，而不是执行完整检查。您还可以尝试通过使用禁用submit按钮

ng disabled=“addUser.$invalid”

---

这里有一个教程：

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

看起来您还可以执行addUser.valid之类的操作，而不是执行完整检查。您还可以尝试通过使用禁用submit按钮

ng disabled=“addUser.$invalid”

以下是一个教程：