验证日期输入是否超过 18 年时出现问题

Question

我有一个日期输入字段，用于从用户那里获取出生日期，我已经创建了后端验证，用于检查用户输入的出生日期是否超过 18 岁，需要使用一些 Javascript 或 Jquery 在前端实现这一点，我不知道如何处理它。

包含出生日期的输入字段

<div class="form-line registar love {{ $errors->has('dob') ? ' has-error' : '' }}">
<input type="date" class="form-input" name="dob" value="{{ old('dob') }}" required>
<label>Date of Birth *</label>
<div class="error-label">Field is required!</div>
<div class="check-label"></div>
@if ($errors->has('dob'))
<span class="help-block">
<strong>{{ $errors->first('dob') }}</strong>
</span>
@endif
</div>

Answer 1

function validateForm(event) {
// Store value of date of birth field
let dateOfBirthFieldValue = document.getElementById("dob").value;
let bday = new Date(dateOfBirthFieldValue);
let todayDate = new Date();
let timeDiff = Math.abs(todayDate.getTime() - bday.getTime());
let diffyears = Math.ceil(timeDiff / (1000 * 3600 * 24)/365); 
return diffyears > 18; // or you can change value according to your requirement
}

Answer 2

也许您可以使用 onSubmit 事件侦听器首先侦听正在提交的表单：

document.getElementById("my-form").addEventListener('submit', validateForm);
function validateForm(event) {
// Store value of date of birth field
let dateOfBirthFieldValue = document.getElementById("dob").value;
// Boolean to store the status of the validation
let isValid = false;
// some validation logic (as per backend), set isValid to true if dob is valid
// if isValid is false, the form will not submit
return isValid; 
}

您还可以向函数添加一些逻辑以更新相应的表单标签以包含有关错误的信息。使用jQuery应该很简单。以下是一些进一步的阅读。