Javascript Jquery下拉列表日期验证

我正在使用jQuery验证插件验证我的站点的注册表单。用户必须做的一件事就是输入他们的生日，他们必须年满18岁才能使用该网站。我正在通过三个下拉菜单输入生日。我想验证此条目（以确保他们做到了，并确保他们至少18岁，但我无法理解自定义验证器的构建。以下是我的表单代码：

<p>
            <label for="user_birthday">Birthday</label>
            <br>
            <select id="user_birthday_2i" name="user[birthday(2i)]">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            etc....
            </select>
            <select id="user_birthday_3i" name="user[birthday(3i)]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            etc...
            </select>
            <select id="user_birthday_1i" name="user[birthday(1i)]">
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            etc...
            </select>
          </p>

生日


一月
二月
前进
等
1.
2.
3.
等
2010
2011
等

---

在使用jQuery验证插件之前，有人构建过这样的验证程序吗？

人们通常非常清楚自己的生日，所以我宁愿让他们输入。验证日期也很容易

Birthday:<input name="birthday" onblur="validate18(this);">
<br>
<span class="hint">day/month/year</span>
<br>
<span id="birthdayError" class="errorMessage"></span>

<script>

function validate18(el) {
    var bits = typeof el.value == 'string'? el.value.split('/') : [];
    var d = new Date(bits[2], bits[1]-1, bits[0]);
    var err = document.getElementById(el.name + 'Error');

    // Check date was valid
    if (d && d.getFullYear() == bits[2] && d.getMonth() == bits[1]-1) {

        // Check is 18 years ago or more
        var testDate = new Date();
        var testDate = testDate.setYear(testDate.getFullYear() - 18);
        err.innerHTML = (testDate - d < 0)? 'Sorry, you aren\'t 18 yet' : '';
    } else {
      err.innerHTML = 'Please enter a valid date';
    }
}

</script>

生日：


日/月/年


功能验证18（el）{
var bits=typeof el.value==“字符串”？el.value.split（“/”）：[]；
var d=新日期（位[2]，位[1]-1，位[0]）；
var err=document.getElementById（el.name+'Error'）；
//检查日期是否有效
if（d&&d.getFullYear（）==位[2]&&d.getMonth（）==位[1]-1）{
//支票是18年前或更久以前的
var testDate=新日期（）；
var testDate=testDate.setYear（testDate.getFullYear（）-18）；
err.innerHTML=（testDate-d<0）？“对不起，您还没有18岁”：”；
}否则{
err.innerHTML='请输入有效日期'；
}
}

人们通常很清楚自己的生日，所以我宁愿让他们输入。确认日期也很容易

Birthday:<input name="birthday" onblur="validate18(this);">
<br>
<span class="hint">day/month/year</span>
<br>
<span id="birthdayError" class="errorMessage"></span>

<script>

function validate18(el) {
    var bits = typeof el.value == 'string'? el.value.split('/') : [];
    var d = new Date(bits[2], bits[1]-1, bits[0]);
    var err = document.getElementById(el.name + 'Error');

    // Check date was valid
    if (d && d.getFullYear() == bits[2] && d.getMonth() == bits[1]-1) {

        // Check is 18 years ago or more
        var testDate = new Date();
        var testDate = testDate.setYear(testDate.getFullYear() - 18);
        err.innerHTML = (testDate - d < 0)? 'Sorry, you aren\'t 18 yet' : '';
    } else {
      err.innerHTML = 'Please enter a valid date';
    }
}

</script>

生日：


日/月/年


功能验证18（el）{
var bits=typeof el.value==“字符串”？el.value.split（“/”）：[]；
var d=新日期（位[2]，位[1]-1，位[0]）；
var err=document.getElementById（el.name+'Error'）；
//检查日期是否有效
if（d&&d.getFullYear（）==位[2]&&d.getMonth（）==位[1]-1）{
//支票是18年前或更久以前的
var testDate=新日期（）；
var testDate=testDate.setYear（testDate.getFullYear（）-18）；
err.innerHTML=（testDate-d<0）？“对不起，您还没有18岁”：”；
}否则{
err.innerHTML='请输入有效日期'；
}
}

我使用的是，它工作得很好，所以我想坚持使用它。基本上，我必须添加一个自定义验证器，并最终使用库来解释日期。例如：

# formats the date into a hidden field that can be validated when the dropdowns are changed.
$('#user_birthday_3i,#user_birthday_2i,#user_birthday_1i').change(function() {  
      $('#user_birthday').val($('#user_birthday_3i').val()+'/'+ $('#user_birthday_2i').val()+'/'+ $('#user_birthday_1i').val());
    });


# uses date.js to interpret the date and do a little math
jQuery.validator.addMethod("ofAge", function(value, element) { 
        return Date.parse($("#user_birthday").val()) < (18).years().ago();
    }, "You must be 18 years old to join.");


# validated the form using the jquery validation plugin
$("#new_user_signup").validate({
    rules: {
        "user[birthday]": {
            required: true,
            date: true,
            ofAge: true
        }
    },
    messages: {
        "user[birthday]": {
            required: "Please enter your birthday.",
            date: "Please enter your birthday."
        }
    }
});

#将日期格式化为隐藏字段，当下拉列表更改时可以验证该字段。
$（'user_birth_3i，#user_birth_2i，#user_birth_1i'）。更改（函数（）{
$（'.'用户生日'）.val（$（'.'用户生日'）.val（）+'/'+$（'.'用户生日'）.val（）+'/'+$（'.'用户生日'）.val（）+'/'+$（'.'用户生日'.val（））；
});
#使用date.js解释日期并进行一些计算
addMethod（“of age”，函数（值，元素）{
返回日期.parse（$（“#user_birth”）.val（））<（18.years（）.ago（）；
}，“您必须年满18岁才能加入。”）；
#使用jquery验证插件验证表单
$（“#新用户注册”）。验证({
规则：{
“用户[生日]”：{
要求：正确，
日期：对，
年龄：对
}
},
信息：{
“用户[生日]”：{
必填：“请输入您的生日。”，
日期：“请输入您的生日。”
}
}
});

总的来说，我不确定这是否是最好的方法，但它对我很有效！

我使用了，而且它工作得很好，所以我想坚持使用它。基本上，我必须添加一个自定义验证器，并最终使用库来解释日期。例如：

# formats the date into a hidden field that can be validated when the dropdowns are changed.
$('#user_birthday_3i,#user_birthday_2i,#user_birthday_1i').change(function() {  
      $('#user_birthday').val($('#user_birthday_3i').val()+'/'+ $('#user_birthday_2i').val()+'/'+ $('#user_birthday_1i').val());
    });


# uses date.js to interpret the date and do a little math
jQuery.validator.addMethod("ofAge", function(value, element) { 
        return Date.parse($("#user_birthday").val()) < (18).years().ago();
    }, "You must be 18 years old to join.");


# validated the form using the jquery validation plugin
$("#new_user_signup").validate({
    rules: {
        "user[birthday]": {
            required: true,
            date: true,
            ofAge: true
        }
    },
    messages: {
        "user[birthday]": {
            required: "Please enter your birthday.",
            date: "Please enter your birthday."
        }
    }
});

#将日期格式化为隐藏字段，当下拉列表更改时可以验证该字段。
$（'user_birth_3i，#user_birth_2i，#user_birth_1i'）。更改（函数（）{
$（'.'用户生日'）.val（$（'.'用户生日'）.val（）+'/'+$（'.'用户生日'）.val（）+'/'+$（'.'用户生日'）.val（）+'/'+$（'.'用户生日'.val（））；
});
#使用date.js解释日期并进行一些计算
addMethod（“of age”，函数（值，元素）{
返回日期.parse（$（“#user_birth”）.val（））<（18.years（）.ago（）；
}，“您必须年满18岁才能加入。”）；
#使用jquery验证插件验证表单
$（“#新用户注册”）。验证({
规则：{
“用户[生日]”：{
要求：正确，
日期：对，
年龄：对
}
},
信息：{
“用户[生日]”：{
必填：“请输入您的生日。”，
日期：“请输入您的生日。”
}
}
});

---

总的来说，我不确定这是否是最好的方法，但它对我有效！

这很好。有什么特别的原因让你在下拉列表中输入内容吗？我只是不想遇到这样一个问题：用户输入的是3-3-85而不是3/3/85，或者来自不同国家的人等等。这对用户来说似乎更重要。你可以使用常规的expr拆分中的session可以拆分任何您喜欢的内容，即使是/\D/也可以拆分任何非数字字符。我更喜欢键入它，因为日期选择器很烦人，只要为您的用户做最好的事情就行了。这很好。您有什么特别的原因在下拉列表中进行输入吗？我只是不想遇到用户输入3-3-85而不是3/3/85的问题，或者来自不同国家/地区的人等等。用户似乎需要做更多的工作。您可以在拆分中使用正则表达式拆分任何您喜欢的内容，甚至是/\D/等任何非数字字符。我更喜欢键入它，因为日期选择器很烦人，请为您的用户做最好的事情。