个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我在验证输入字段时遇到问题，我有三个输入字段，一个用于名字、姓氏和出生日期，当我将这些字段留空时，它会显示代码中定义的警告消息，当我将数据输入到消息消失的字段中，日期字段除外。只有当我再次点击时它才会消失。这是我的代码
<!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/
25
4
0
我的数据库中有两张表，一张用于 field ，另一张用于预订。我需要的是一个查询来选择所有未预订的 field 。见下文: 餐 table 预订具有以下字段: bk_id venue_id 作为(预订
嗨，我是编码新手，我有一些培训项目，其中包括从 HTML 表单输入 MySQL 数据库。它就像你玩过的游戏的日志。第一个日期输入是您开始游戏的时间，第二个日期输入是您完成游戏的时间。但我需要检查器或类
我是这个 sql 编码的新手，我正在尝试学习新的东西。因此，我创建了一个交货表，其中包含一些属性，如商品代码、交货日期、交货数量。所以如何从同一张表中获取第一个交货日期(最小日期)和交货数量以及最晚交
我从支付网关返回了这个日期 2014-05-15T08:40:52+01:00 我得到 2014-05-15T08:40:52 但我无法识别时区 +01:00 的含义 我的位置时区是 UTC−06:0
我快要疯了，请帮忙。 我有一列包含日期时间值。 我需要找到每天的最小值和最大值。 数据看起来像这样 2012-11-23 05:49:26.000 2012-11-23 07:55:43.000
我从 json 数据中获取日期为 2015 年 4 月 15 日晚上 10:15我只想在 html 页面中显示 json 响应数据的时间，例如 10:15 PM这里我放了我的js函数和html代码 J
是否有 javascript 库或其他机制允许我将 .NET 日期/时间格式字符串(即 yyyy-MM-dd HH:mm:ss)传递给 javascript函数并让它相应地解析提供的日期时间值？我一直
我正在使用以下代码以正确的格式获取当前的 UTC 时间，但客户返回并要求时间戳现在使用 EST 而不是 UTC。我搜索了 Google 和 stackoverflow，但找不到适用于我现有代码的答案。
我有以下日期的平均温度数据。我想找到连续至少 5 天低于或高于 0 摄氏度的开始日期。 date_short mean.temp 1 2018-05-18 17.54 2 2018-05-19
它可以在其他网络浏览器中使用，但 IE11 返回无效日期。 为了调试我使用了下面的代码。 console.log('before - ' + date.value); date.value = new
我在 Excel 中有一个数据的 Web 提取，其中日期列带有/Date(1388624400000)/。我需要在 Excel 中将其转换为日期。 最佳答案 能够从 here 中推断出它. 假设字符串
嗨，我的 Schmema 有一个带有 ISO 日期的字段: ISODate("2015-04-30T14:47:46.501Z") Paypal 在成功付款后以该形式返回日期对象: Time/Date
我的 table : CREATE TABLE `tbdata` ( `ID` INT(10) NOT NULL AUTO_INCREMENT, `PatientID` INT(10) NOT
我正在 Ubuntu 服务器 12.04 中编写一个 shell 脚本，它应该比较日志文件中的一些数据。在日志文件中，日期以以下格式给出: [Mon Apr 08 15:02:54 2013] 如您所
我想使用 GROUP BY WITH ROLLUP 创建一个表并获取总行数而不是 null。 $sql ="SELECT IF(YEAR(transaktioner.datum
我正在创建博客文章，在成功迁移我的博客文件后，当我转到我网站的博客页面时返回一个错误(无法解析其余部分:':“Ymd”'来自'post.date|date: "Ymd"') 我似乎无法确定这是语法错误
我正在尝试获取要插入到 CAML 查询中的月份范围，即:2010-09-01 和 2010-09-30。 我使用以下代码生成这两个值: var month = "10/2010"; var month
如何将代码document.write("直到指定日期")更改为writeMessage(date)中的日期？此外，writeMessage(date) 中的日期未正确显示(仅显示年份)。感谢您帮助解
我在 Windows (XP) 和 Linux 上都尝试过 utime()。在 Windows 上我得到一个 EACCES 错误，在 Linux 上我没有得到任何错误(但时间没有改变)。我的 utim
我正在尝试计算发生在同一日期的值的总和(在 XYZmin 中)。 我的数据看起来像这样， bar <- structure(list(date = structure(c(15622, 15622,
我是一名优秀的程序员,十分优秀！