我在验证输入字段时遇到问题，我有三个输入字段，一个用于名字、姓氏和出生日期，当我将这些字段留空时，它会显示代码中定义的警告消息，当我将数据输入到消息消失的字段中，日期字段除外。只有当我再次点击时它才会消失。这是我的代码
<!DOCTYPE html>
<html>
<head id="html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<script>
$(function() {
$("#date-of-birth").datepicker(
{
dateFormat:'dd-mm-yy',
changeMonth: true,
changeYear: true,
});
});
</script>
<style >
#first-name{
width: 300px;
margin-top: 10px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#last-name{
width: 300px;
margin-top: 5px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#date-of-birth{
width: 300px;
margin-top: 5px;
margin-left: 510px;
padding-left: 10px;
border: 1px solid grey;
border-radius: 5px;
}
#first-name-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
#last-name-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
#dob-warning-message{
padding-left: 640px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body id="body">
<form id="sign-up" action="#" method="post">
<div id="row-one">
<input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15">
</div>
<div id="span-container">
<span id="first-name-warning-message" class="text-danger"> </span>
</div>
<div id="row-two">
<input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15">
</div>
<div id="span-container">
<span id="last-name-warning-message" class="text-danger"> </span>
</div>
<div id="row-three">
<input class="date-picker" id="date-of-birth" name="user_dob" placeholder="Date Of Birth" readonly="true">
</div>
<div id="span-container">
<span id="dob-warning-message" class="text-danger"> </span>
</div>
</form>
<script>
$(document).ready(function(){
$('#first-name-warning-message').hide();
$('#last-name-warning-message').hide();
$('#dob-warning-message').hide();
var first_name_error=true;
var last_name_error=true;
var dob_error=true;
$('#first-name').focusout(function(){
validate_first_name();
});
$('#last-name').focusout(function(){
validate_last_name();
});
$('#date-of-birth').focusout(function(){
validate_date_of_birth();
});
function validate_first_name(){
var first_name=$('#first-name').val();
var first_name_regex=/^[a-zA-Z ]{3,15}$/;
if(first_name.length==''){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("Please Enter Your First Name !");
first_name_error=false;
return false;
}
else{
$('#first-name-warning-message').hide();
}
if(first_name.length<3){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("First Name Not Valid !");
first_name_error=false;
return false;
}
else{
$('#first-name-warning-message').hide();
}
if(!first_name_regex.test(first_name)){
$('#first-name-warning-message').show();
$('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !");
first_name_error=false;
return false;
}
else{
$('#first-name-warning-message').hide();
}
}
function validate_last_name(){
var last_name=$('#last-name').val();
var last_name_regex=/^[a-zA-Z ]{3,15}$/;
if(last_name.length==''){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Please Enter Your Last Name !");
last_name_error=false;
return false;
}
else{
$('#last-name-warning-message').hide();
}
if(last_name.length<3){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Last Name Not Valid !");
last_name_error=false;
return false;
}
else{
$('#last-name-warning-message').hide();
}
if(!last_name_regex.test(last_name)){
$('#last-name-warning-message').show();
$('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !");
last_name_error=false;
return false;
}
else{
$('#last-name-warning-message').hide();
}
}
function validate_date_of_birth(){
var date_of_birth=$('#date-of-birth').val();
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();
}
}
});
</script>
</body>
</html>你们能为我提供解决方案吗？感谢所有答案。提前致谢。
最佳答案
由于您的代码当前是结构化的，focusout 和 blur 事件都将在 $('#date-of-birth' ) 已设置。设置值后不会再次运行，除非您再次进入和离开该字段。
与其在 focusout 或 blur 上调用 validate_date_of_birth()，不如考虑使用验证逻辑将 onClose 函数添加到日期选择器定义中。这样，在日期选择器关闭并分配值之前，它不会运行验证。
即，
$(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();
}
}
});
});
查看此 question有关 onClose 工作原理的示例，或 jQuery documentation .
关于javascript - 日期字段的 JQuery 验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51789479/