Question

我有三个文本框BirthDate，JoiningDate＆amp; LeavingDate。

现在我想要的是： -

Joining date和Leaving date不得大于Birthdate
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

首先让我假设您实际上意味着以下

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

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

现在寻求解决方案，您可以使用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

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

3 个答案: