出生日期、加入日期和离开日期的日期验证

Question

我有 BirthDate、JoiningDate 和 LeavingDate 的三个文本框。

现在我想要的是：-

1. Joining date 和 Leaving date 不应大于 Birthdate

2. Leaving Date 不应大于Joining Date 和BirthDate

我用过 DatePicker。

这里是JS代码：-

$(function () {
        $("[id$=mainContent_txtdateofbirth], [id$=mainContent_txtdoj], [id$=mainContent_txtdol]").datepicker({
            textboxImageOnly: true,
            textboxImage: 'images/calendar.png',
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy / mm / dd",
            yearRange: "-40:+0",
            maxDate: new Date(),
        });
    });

三个文本框是：-

<asp:TextBox ID="txtdateofbirth" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
    <asp:TextBox ID="txtdoj" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
    <asp:TextBox ID="txtdol" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>

更新的 ASPX 代码：-

<tr>
        <td style="vertical-align: top;">
            <label class="control-label" for="dob">Date of Birth</label></td>
        <td>
            <div class="control-group">
                <div class="controls">
                    <asp:TextBox ID="txtdateofbirth" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="reqdob" runat="server" CssClass="error-class" ControlToValidate="txtdateofbirth" ErrorMessage="Please select the date of birth" ValidationGroup="AddNew"></asp:RequiredFieldValidator>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top;">
            <label class="control-label" for="subject">Date of Join</label></td>
        <td>
            <div class="control-group">
                <div class="controls">
                    <asp:TextBox ID="txtdoj" Wrap="true" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="reqdoj" CssClass="error-class" runat="server" ControlToValidate="txtdoj" ErrorMessage="Please add the date of joining" ValidationGroup="AddNew"></asp:RequiredFieldValidator>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td style="vertical-align: top;">
            <label class="control-label" for="subject">Date of Leaving</label></td>
        <td>
            <div class="control-group">
                <div class="controls">
                    <asp:TextBox ID="txtdol" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
                </div>
            </div>
        </td>
    </tr>

Answer 1

Demo

验证函数

var validateData = function () {
    var bday = $('#birthdate').val();
    var jday = $('#joiningdate').val();
    var lday = $('#leavingdate').val();

    if (bday && jday && bday > jday) {return}
    if (bday && lday && bday > lday) {return}
    if (jday && lday && jday > lday) {return}

    return true;
};

调用datepicker的onClose事件，之后可以显示什么错误信息。随意更改错误显示方式。

    onClose: function () {
        validateData() ? $('#errormsg').hide() : $('#errormsg').show();
    }

更新

要添加一些 css 到错误消息添加类到它像

<div id="errormsg" class="error-msg">Invalid date</div>

然后您可以将 display: none; 移动到您的 css 中

更新

Demo 用于必填字段

Answer 2

完成的 JS Fiddle 是 here

首先让我假设您实际上是指以下内容

• 加入日期不得小于生日
• 离开日期不应小于加入日期和出生日期

而不是反过来，如果我错了，请纠正我。

现在寻找解决方案，您可以通过使用 jQuery Validation Plugin 来实现。只需向插件添加自定义验证功能并针对它验证表单。请看示例代码

<form id="myForm">
    <p>Date Of Birth:
        <input type="text" name="datepicker_dob" id="datepicker_dob" />
    </p>
    <p>Date Of Joining:
        <input type="text" name="datepicker_doj" id="datepicker_doj" />
    </p>
    <p>Date Of Leaving:
        <input type="text" name="datepicker_dol" id="datepicker_dol" />
    </p>
    <button type="button" id="saveButton">Save</button>
</form>

像这样初始化你的日期时间选择器

$(document).ready(function() {
    $("[id$=datepicker_dob],[id$=datepicker_doj],[id$=datepicker_dol]" ).datepicker({
       // add this option when you initialise the datetime picker, this will
       // validate date based on our custom validation rule when we select a date 
        onSelect:function(){
            $(this).valid(); 
        }
    });
});

接下来是添加自定义验证器函数

$.validator.addMethod("dateValidatorLE", function(value, element, params) {

    var isDateValid = true;
    $(params).each(function(i) {
      //  alert($(params[i]).val());
        isDateValid &= (Date.parse(value) > Date.parse($(params[i]).val()))
    });
    return this.optional(element) || isDateValid;
}, $.validator.format('general error message'));

验证您的表单

$('#myForm').validate({
    rules: {
        datepicker_doj: {
            dateValidatorLE: ['#datepicker_dob']
        },        
        datepicker_dol: {
            dateValidatorLE: ['#datepicker_dob', '#datepicker_doj']
        }
    },
    messages: {
        datepicker_doj: {
            dateValidatorLE: 'DOJ must be greater than DOB'
        },        
        datepicker_dol: {
            dateValidatorLE: 'DOL must be greater that DOJ and DOB'
        }
    },
    onkeyup: function(e) {
      this.element(e);
    }
});

如果这对你有帮助，请告诉我。

Answer 3

我真的不明白你希望你的代码是什么样子。无论如何，这是一个简单的验证，您可以根据需要放入一个函数：

function validateMyForm() {
    return ($('#txtdoj').val() <= $('#txtdateofbirth').val() 
        && $('#txtdol').val() <= $('#txtdateofbirth').val() 
        && $('#txtdol').val() <= $('#txtdoj').val() 
        && $('#txtdol').val() <= $('#txtdateofbirth').val());
}

如果表单有效则返回 true，否则返回 false