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

我有三个文本框用于

生日

，

加入日期

，

离开日期

现在我想要的是：-

加入日期

和

离开日期

不应大于

出生日期

离开日期

不应大于

加入日期

和

出生日期

我用过日期选择器

以下是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>

出生日期
加入日期
离开日期

我不太明白您希望代码的外观。无论如何，这是一个简单的验证，如果需要，您可以将其放入函数中：

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

函数validateMyForm（）{
返回（$（'#txtdoj'）.val（）

验证函数

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;
};

被称为日期选择器的onClose事件，之后可以显示错误消息。请随意更改错误显示方法

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

更新

要向错误消息添加css，请向其添加类，如下所示

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

无效日期

然后可以将
display:none；
移动到css中

更新

对于必填字段
已完成JS FIDLE

首先让我假设你的意思是


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

而不是相反，如果我错了，请纠正我

现在来看解决方案，您可以通过使用jQuery验证插件来实现这一点。只需向插件添加一个自定义验证函数，并根据它验证表单。请参阅示例代码

<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>

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

$.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);
    }
});

让我知道这是否对您有帮助。
如果他们试图输入无效日期，您希望用户体验如何？@EricHughes:他们应该以
无效日期的形式获得消息。
您希望将错误消息放在何处。在日期选择器的输入字段中？还是不重要？@TienNguyen:我想在文本框的正下方显示消息这类问题与StackOverflow的精神背道而驰，StackOverflow是关于创建一个有用的问题和答案库的。你在这里真正做的就是给你的内容提供一个模板，陈述一些要求，并要求为你编写一些代码。你没有试图解决它self，或者如果你这样做了，你没有展示什么有用或不有用。赏金系统不是为那些你应该自己尝试的工作而付钱的人。它是为了吸引人们注意好的问题或奖励特殊的答案。这不是一个好问题开始。-1.如果用户输入了错误的数据，我希望显示简单的错误消息是的，如果它在asp.net中会更有用。因为Tien已经在HTML中这样做了。如果您还需要什么，请告诉我
$('#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);
    }
});