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

Question

我有 BirthDate、JoiningDate 和 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

我真的不明白您希望您的代码看起来如何。无论如何，这是一个简单的验证，您可以根据需要将其放入函数中：

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

如果表单有效则return为真，否则为假

Answer 2

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，请向其添加 class，如

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

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

更新

Demo 必填字段

Answer 3

完成的 JS Fiddle 是 here

首先让我假设你的意思是以下内容

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

反之亦然，如有错误请指正

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

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

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

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

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

Date Validation for Birth Date, Joining Date and Leaving Date

javascript

asp.net

jquery

date

datepicker