Question

我需要使用具有此验证的HTML5创建表单;

出生日期应为dd / mm / yyyy格式的有效日期。进入后在DOB中，页面应计算年龄并提醒用户他/她是否 18岁以下的消息“你必须年满18岁才能注册”

有谁可以让我理解我的代码如何创建此验证？以下是我的表格的样子。

<div id="content">
    <article id="contentimg">
        <form action="http://posttestserver.com/post.php" onsubmit="return validate_form(this)" method="post">
        <fieldset style="border: 1px solid; padding: 10px;">
            <legend>Enter your information to subscirbe:</legend>
            First name: <input class="glowing-border" type="text" name="firstname" required><br>
            Last name: <input class="glowing-border" type="text" name="lastname" required><br>
            Birthday: <input class="glowing-border" type="date" name="bday"><br>
            Address: <input class="glowing-border2" type="text" name="address"><br>
            Mobile Number: <input class="glowing-border" type="text" name="mobno"><br>
            Email: <input id="email" class="glowing-border" type="email" name="email" required pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}"><br>
            Confirm Email: <input id="confemail" class="glowing-border" type="email" name="email" required pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}" 
            onfocus="validateMail(document.getElementById('email'), this);" oninput="validateMail(document.getElementById('email'), this);"><br>
            <input class="glowing-border" type="submit" value="Submit">
            <input class="glowing-border" type="reset" value="Reset">
        </fieldset>
        </form>
    </article>
</div>

Answer 1

在Chrome中，如果设置为type =“text”，我们可以在onblur或onsubmit上执行此操作

function validateDOB(bday) {
  var dateString = bday.value;
  var parts = dateString.split("/"); // not testing if the format is correct here
  var now = new Date();
  var birthday = new Date(now.getFullYear(),parts[1]-1,parts[0]);
  var age = now.getFullYear()-parts[2];
  if (now<birthday) age--;
  if (age<18) {
    alert("You must be over 18 to register");
    return false
  }
  // other validation
  return true;
}

我正在研究如何在HTML5日期字段中执行相同操作

由于某种原因，这不起作用

FIDDLE

function getDob() {
  var date = new Date();
  return (date.getMonth()+1)+"-"+date.getDate()+"-"+(date.getFullYear()-18);
}
$(function() {
  $("input[type=date]").prop("max",getDob());
});

UPDATE - min / max几乎没有支持。

而是使用jQuery日期验证

$(function() {
  $("input[type=date]").prop("max",getDob());
  $("#bday").validate();
});

使用

<input id="bday" required="required"  min="1900-01-01" max="2099-09-13" type="date" >

Answer 2

还有一个想法是

 <input type="number" size="4" name="age" min="18" required style="display:none;">

添加此字段并在更改生日字段

时计算

HTML5年龄验证

2 个答案: