Javascript 日期字段的JQuery验证

Javascript 日期字段的JQuery验证,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在验证输入字段时遇到了一个问题,我有三个输入字段,一个用于名字、姓氏和出生日期,当我将字段留空时,将显示代码中定义的警告消息,当我在字段中输入数据时,消息将消失,日期字段除外。只有当我再次单击时,它才会消失。这是我的密码 $(函数(){ $(“#出生日期”)。日期选择器( { 日期格式:'dd-mm-yy', 变化月:对, 变化年:是的, }); }); #名字{ 宽度:300px; 边缘顶部:10px; 左边距:510px; 左侧填充:10px; 边框:1px纯灰; 边界半径:5px;

我在验证输入字段时遇到了一个问题,我有三个输入字段,一个用于名字、姓氏和出生日期,当我将字段留空时,将显示代码中定义的警告消息,当我在字段中输入数据时,消息将消失,日期字段除外。只有当我再次单击时,它才会消失。这是我的密码


$(函数(){
$(“#出生日期”)。日期选择器(
{
日期格式:'dd-mm-yy',
变化月:对,
变化年:是的,
});	
});
#名字{
宽度:300px;
边缘顶部:10px;
左边距:510px;
左侧填充:10px;
边框:1px纯灰;
边界半径:5px;
}
#姓{
宽度:300px;
边缘顶部:5px;
左边距:510px;
左侧填充:10px;
边框:1px纯灰;
边界半径:5px;
}
#出生日期{
宽度:300px;
边缘顶部:5px;
左边距:510px;
左侧填充:10px;
边框:1px纯灰;
边界半径:5px;
}
#名字警告消息{
左侧填充:640px;
字号:18px;
字体大小:粗体;
}
#姓氏警告信息{
左侧填充:640px;
字号:18px;
字体大小:粗体;
}
#dob警告信息{
左侧填充:640px;
字号:18px;
字体大小:粗体;
}
$(文档).ready(函数(){
$(“#名字警告消息”).hide();
$(“#姓氏警告消息”).hide();
$(“#dob警告消息”).hide();
var first\u name\u error=true;
var last_name_error=true;
var dob_错误=真;
$('#first name').focusout(函数(){
验证_first_name();
});
$('#姓氏').focusout(函数(){
验证姓氏();
});
$(“#出生日期”).focusout(函数(){
验证出生日期();
});
函数validate_first_name(){
var first_name=$('#first name').val();
var first_name_regex=/^[a-zA-Z]{3,15}$/;
如果(名字.长度=“”){
$(“#名字警告消息”).show();
$(“#名字警告消息”).html(“请输入您的名字!”);
第一个\u名称\u错误=false;
返回false;
}
否则{
$(“#名字警告消息”).hide();
}

如果(first_name.length作为您的代码当前的结构,则
focusout
blur
事件都将在
$(“#出生日期”)
的值设置之前触发。除非您再次输入并离开该字段,否则设置该值后将不会再次运行

而不是在FooSUFF或FULL中调用您的<代码> ValueTythDATEORE(< /代码>),考虑使用验证逻辑将一个<代码> OnCuffux/Cuff>函数添加到DeaPekError定义。这样,在DePePoCor关闭并赋值之前,它不会运行验证。

i、 e

$(function() {
    $("#date-of-birth").datepicker({
        dateFormat:'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        onClose: function(selectedDate){
            var date_of_birth=selectedDate;
            if(date_of_birth.length==''){
                $('#dob-warning-message').show();
                $('#dob-warning-message').html("Please Enter Your Date Of Birth !");
                dob_error=false;
                return false;
            }
            else{
                $('#dob-warning-message').hide();
            }
        }
    }); 
});

查看此示例了解
onClose
的工作原理,或者。

您的日期输入有focusout事件处理程序,但是当用户想要选择他已经聚焦的日期时。因此,我认为您应该验证focusout(或模糊).您的表单中是否有提交按钮?是的,我在实际代码中使用过,因此请验证用户提交页面的日期时间。因为当用户在日期选择器中单击日期时,它会聚焦在输入之外,然后您的事件处理程序会触发并说“文本为空”因为我们没有在输入中设置日历中的日期。快速修复方法是将
validate\u date\u of\u birth()
更改为
setTimeout(validate\u date\u of\u birth,500)