Javascript 如何在angularjs中将输入字段验证为总页数

Javascript 如何在angularjs中将输入字段验证为总页数,javascript,angularjs,forms,validation,Javascript,Angularjs,Forms,Validation,我目前有一个表单,用户可以在其中输入他们想要指定的文档的开始和结束页码。用户还可以创建更多行的起始页和结束页。我要进行的验证之一是计算用户选择的总页数等于他们输入页码的文档的总页数。我在总页面验证方面遇到问题。不太确定我应该把逻辑放在哪里 HTML: <form name="pageForm" ng-submit="submitPageForm(pageForm.$valid)" novalidate> <div class="form-group col-sm-3"

我目前有一个表单,用户可以在其中输入他们想要指定的文档的开始和结束页码。用户还可以创建更多行的起始页和结束页。我要进行的验证之一是计算用户选择的总页数等于他们输入页码的文档的总页数。我在总页面验证方面遇到问题。不太确定我应该把逻辑放在哪里

HTML:

<form name="pageForm" ng-submit="submitPageForm(pageForm.$valid)" novalidate>
    <div class="form-group col-sm-3" ng-repeat="file in pages.items">
        <label for="start">Pages </label>
        <input type="number" name="startPage" class="form-control" id="start" ng-model="file.startNumber">
        <label for="end"> - </label>
        <input type="number" name="endPage" class="form-control" id="end" ng-model="file.endNumber" ng-change="autoStartPageNumber($index)">
    </div>

    <div class="row">
        <label for="totalPage">total: {{totalPage}}</label>
        <input type="number" ng-model=totalPage>
    </div>

    <div class="row">
        <div class="col-sm-2">
            <a href="#" ng-click="addRow()">Add another document</a>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-2">
            <button type="submit" class="btn btn-default" ng-disabled="pageForm.$invalid">Done</button>
        </div>
    </div>
    {{result}}
</form>

页
- 
总计:{{totalPage}
多恩
{{result}}
控制器:

    $scope.pages = {
    items: [{
        startNumber: 1,
        endNumber: ''
    }, {
        startNumber: '',
        endNumber: ''
    }]
};
$scope.totalPage = 10;
$scope.autoStartPageNumber = function(index) {
    if (index + 1 < $scope.pages.items.length) {
        $scope.pages.items[index + 1].startNumber = $scope.pages.items[index].endNumber + 1;
    }
};
$scope.addRow = function() {
    $scope.pages.items.push({
        startNumber: $scope.pages.items[$scope.pages.items.length - 1].endNumber + 1,
        endNumber: ''
    });
};
$scope.submitPageForm = function(isValid) {
    // check to make sure the form is completely valid
    if (isValid) {
        $scope.result = 'form is valid!';
    } else {
        $scope.result = 'form is invalid!';
    }
};
$scope.pages={
项目:[{
开始编号:1,
结束编号:“”
}, {
开始编号:“”,
结束编号:“”
}]
};
$scope.totalPage=10;
$scope.autoStartPageNumber=函数(索引){
if(索引+1<$scope.pages.items.length){
$scope.pages.items[index+1]。startNumber=$scope.pages.items[index]。endNumber+1;
}
};
$scope.addRow=函数(){
$scope.pages.items.push({
startNumber:$scope.pages.items[$scope.pages.items.length-1].endNumber+1,
结束编号:“”
});
};
$scope.submitPageForm=函数(isValid){
//检查以确保表单完全有效
如果(有效){
$scope.result='表单有效!';
}否则{
$scope.result='表单无效!';
}
};

编辑:
例如,如果总页数是10…那么我希望用户能够选择像1-5和6-10这样的选项使其有效。如果总页数关闭,例如1-3和4-11…那么我想抛出一个错误

您可以将总页数设置为您计算的字段,而不是从用户处获取。这样,您就不必对其进行验证

JS

$scope.autoStartPageNumber = function(index) {
    if (index + 1 < $scope.pages.items.length) 
        $scope.pages.items[index + 1].startNumber = $scope.pages.items[index].endNumber + 1;
    else
        $scope.totalPage = $scope.pages.items[index].endNumber;
};
$scope.autoStartPageNumber=函数(索引){
if(索引+1<$scope.pages.items.length)
$scope.pages.items[index+1]。startNumber=$scope.pages.items[index]。endNumber+1;
其他的
$scope.totalPage=$scope.pages.items[index].endNumber;
};
演示

更新:如果您想在用户单击“完成”按钮时抛出错误,可以检查总页面和结束页面是否相同

 $scope.autoStartPageNumber = function (index) {
     if(index +1 < $scope.pages.items.length){
       $scope.pages.items[index+1].startNumber=$scope.pages.items[index].endNumber + 1;
     }
     else
             $scope.length=$scope.pages.items[index].endNumber;
    };

             if($scope.length!= $scope.totalPage){
                $scope.errorFlag=true;
            }
$scope.autoStartPageNumber=函数(索引){
if(索引+1<$scope.pages.items.length){
$scope.pages.items[index+1]。startNumber=$scope.pages.items[index]。endNumber+1;
}
其他的
$scope.length=$scope.pages.items[index].endNumber;
};
如果($scope.length!=$scope.totalPage){
$scope.errorFlag=true;
}

演示

嗯,这不完全是我想要做的。。。我想验证总页数与设置的页数(无论总页数是由用户还是我设置的),您到底想要什么?你想抛出这样的错误?我想做的是使用起始页和结束页计算页数,并将其与总页数进行比较,然后在用户试图验证你是否在寻找这样的错误时抛出错误?@jeremy你为什么要删除答案?