Question

使用 jQuery 验证 <select>

2017-10-08

73

jquery html

我有 3 个 <select> 元素，分别表示日、月和年。我正尝试使用 jQuery 验证它们。

<li class="pseudo_day">
    <select class="mod_day" name="day">
        <option disabled selected>Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
</li>

如下所示：

$("select[name=day], select[name=month], select[name=year]").on('change', function(){

    var select_day = $("select[name=day]").val();
    var select_month = $("select[name=month]").val();
    var select_year = $("select[name=year]").val();

        if ( select_day.length !== 0 ) { console.log("Valid - " + select_day); }
        else { console.log("Not valid!"); }
});

这是我运行 jQuery 代码时得到的错误：

Uncaught TypeError: Cannot read property 'length' of null
    at HTMLSelectElement.<anonymous> (new_user.html:242)
    at HTMLSelectElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLSelectElement.q.handle (jquery-3.2.1.min.js:3)

我在这里做错了什么？

Answer 1

当未选择任何选项 select[name=day] 时， $("select[name=day]").val() 为 null ，您会收到错误，因为我们无法读取 null 的属性“length”。我们可以通过多种方式解决此问题，但您可以采用以下一种方式：

var select_day = $("select[name=day]").val() || '';
var select_month = $("select[name=month]").val() || '';
var select_year = $("select[name=year]").val() || '';

Answer 2

问题是，在所选内容的每个 change 事件中，您都试图获取所有值。例如，如果您仅更改了 year ，则 month 和 day 未定义。然后，您尝试通过获取其长度来操纵日期 - select_day.length 。您可以使用 palash 建议的方法或检查存在性并输入类似

if (select_day && typeof select_day === 'string' ) ...

仅当 select_day 不是空字符串时，这才是正确的。