如何使用javascript创建范围验证器?在VS中不使用范围验证器控件

how to create a range validator using javascript? not use range validator control in VS

本文关键字：验证 VS 使用范围 控件 创建 范围 何使用 javascript      更新时间：2023-09-26

我想定义一个函数来使用java脚本验证范围
我有两个文本框，我输入最大值和最小值。这是我的代码：

 <tr id="TR_Max">
  <td><span>max value:</span></td>
  <td><input id="Text2" type="text" style="width:90%"/></td>
 </tr>
 <tr id="TR_Min">
  <td><span>min value:</span></td>
  <td><input id="Text3" type="text" style="width:90%"/></td>
 </tr>

我有另一个文本框，用户可以在其中输入他们的愿望值。

<input id="user_val" type="text" style="width:90%"/>

现在我需要一个函数来检查用户值是否在最大值和最小值之间。当然，首先我应该检查最大值和最低值的类型。我该怎么做？

我认为处理这一问题的最佳方法是创建一个可以依次求值的正则表达式列表。如果你找到了匹配项，那么你就知道你的类型，如果你没有找到匹配项，则你可以假设它只是一种刺痛类型。

正则表达式列表可以与数组中的数据类型配对，如下所示：

var patterns = [
    [
        'int', /^['d]+$/],
    [
        'float', /^[-+]?[0-9]*'.?[0-9]+$/],
    [
        'date', /^(0[1-9]|[12][0-9]|3[01])[- '/.](0[1-9]|1[012])[- '/.](19|20)'d'd$/]
];

注：日期格式必须为dd/mm/yyyy，但可以根据需要更改

然后假设html有几个字段（#min和#max），我们可以创建这个函数（注意JQuery的使用）：

function compare() {
    var min = $("#min").val();
    var max = $("#max").val();
    if (min === "" || max === "") {
        alert("data missing - check down the sofa");
        return;
    }
    var dataType = "string";
    for (var i = 0; i < patterns.length; i++) {
        if (patterns[i][1].test(min) && patterns[i][2].test(max)) {
            dataType = patterns[i][0];
            break;
        }
    }
    alert("Min and Max are of type: " + dataType);
}

需要注意的是，两个字段必须具有相同的数据类型，如果没有，则会产生string数据类型。

以下是的工作示例

如果你想扩展它来验证范围，你可以这样做：

function checkRange(dataType, min, max) {
    var minValue, maxValue;
    switch (dataType) {
        case 'int':
            {
                minValue = parseInt(min, 10);
                maxValue = parseInt(max, 10);
            }
            break;
        case 'float':
            {
                minValue = parseFloat(min);
                maxValue = parseFloat(max);
            }
            break;
        case 'date':
            {
                minValue = $.datepicker.parseDate('dd/mm/yy', min);
                maxValue = $.datepicker.parseDate('dd/mm/yy', max);
            }
            break;
        case 'string':
            {
                minValue = min;
                maxValue = max;
            }
            break;
    }
    return minValue <= maxValue;
}

下面是一个工作示例（注意：JQuery UI用于解析日期）

相关文章：