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

也许您可以使用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应该非常简单。这是一些further reading。

Answer 2

    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
    }

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

2 个答案: