在表单中验证年龄但没有得到输出,不确定什么是不正确的

Validating the age in a form and not getting output, not sure what's incorrect

本文关键字:输出 不确定 什么 不正确 验证 表单      更新时间:2023-09-26

所以我正在制作一个接受姓名、年龄和身份证号码的表格。

IC号码的格式是yymmdd-xx-xxxx,其中前四个数字是人的D.O.B.。最后四个数字是IC的唯一代码,中间的两个数字是该人出生地的州代码。我想做的是取IC号码的前两个数字(人出生的年份),并将其与当前年份扣除,并将其与该人给出的年龄进行比较,输出会说年龄正确或不正确。

这是我到目前为止尝试过的。

function valForm() {
  function valName() {
    var regexName = /^[a-zA-Z]*$/;
    if (regexName.test(document.ageVal.name.value)) {
      return true;
    } else {
      return false;
    }
  }
  function valIc() {
    var regexIc = /^'d{6}-'d{2}-'d{4}$/;
    if (regexIc.test(document.ageVal.icNum.value)) {
      return true;
    } else {
      return false;
    }
  }
  if (!valName()) {
    alert("Enter a name using only alphabets");
    document.ageVal.name.focus();
    document.getElementById("notifName").innerHTML = "Alphabets only";
  }
  if (!valIc()) {
    alert("Correct format is xxxxxx-xx-xxxx");
    document.ageVal.icNum.focus();
    document.getElementById("notifIc").innerHTML = "Not the correct format";
  }
  var today = new Date();
  var year = today.getFullYear();
  var yr = document.getElementById("icNum");
  var yrIc = parseInt(yr, 10);
  while (yrIc >= 100)
    yrIc = Math.floor(yrIc / 10);
  fullyrIc = 1900 + yrIc;
  var actAge = year - fullyrIc;
  var givnAge = document.getElementById("age");
  if (actAge == givnAge)
    document.getElementById("output").innerHTML = "Age is correct";
  else
    document.getElementById("output").innerHTML = "Age is not correct";
}
<form name="ageVal" action="javascript:valForm()">
  <table border="solid" width="25%">
    <tr>
      <td>Name: &nbsp;</td>
      <td colspan=2>
        <input type="text" name="name" id="age">
        <div id="notifName"></div>
      </td>
    </tr>
    <tr>
      <td>Age: &nbsp;</td>
      <td colspan=2>
        <input type="number" name="age" id="age">
        <div id="notifAge"></div>
      </td>
    </tr>
    <tr>
      <td>IC: &nbsp;</td>
      <td colspan=2>
        <input type="text" name="icNum" id="icNum">
        <div id="notifIc"></div>
      </td>
    </tr>
    <tr>
      <td colspan=3 align="center">
        <input type="text" name="output" id="output" disabled>
      </td>
    </tr>
  </table>
  <input type="submit" form="ageVal" value="Submit">
</form>

在尝试了很多并进行了很多更改后,我无法获得任何输出。我仍然是JS的新手,甚至尝试正则表达式的新手,所以我确定我在这里做错了很多事情。

经过一些更改,由于前两个答案,我终于可以获得输出,但现在的问题是计算不正确。我应该如何纠正它?

output id 元素是input元素。使用 value 属性设置值而不是 innerHTML 来查看任何输出:

if (actAge == givnAge)
   document.getElementById("output").value = "Age is correct";
else
   document.getElementById("output").value = "Age is not correct";

JS小提琴

在脚本中,您获取的是元素而不是值。改变这个...

var yr = document.getElementById("icNum");
var givnAge = document.getElementById("age");

成这个...

var yr = document.getElementById("icNum").value;
var givnAge = document.getElementById("age").value;

你现在应该没有问题。但我不明白你在while循环中做什么。你能解释一下吗?

问题 1

你需要把javascript调用放在提交中,并返回:

 <form name="ageVal" method="POST" action="javascript:void(0);" onsubmit="valForm()">
 <!--- rest of code -->

问题 2

您忘记在document.getElementById("icNum")document.getElementById("age")上添加.value

var yr = document.getElementById("icNum").value;
var givnAge = document.getElementById("age").value;

您可以在此处检查代码是否正常工作:

https://jsfiddle.net/4459z225/1/

用于简单的年龄计算取代

var today = new Date();
  var year = today.getFullYear();
  var yr = document.getElementById("icNum");
  var yrIc = parseInt(yr, 10);
  while (yrIc >= 100)
    yrIc = Math.floor(yrIc / 10);
  fullyrIc = 1900 + yrIc;
  var actAge = year - fullyrIc;

var regex = /^('d{2})('d{2})('d{2})/;
var dob = document.getElementById("icNum").match(regex);
var dobYear = dob[1];
var dobMonth = dob[2];
var dobDate = dob[3];
var birthday = new Date(dobYear+'/'+dobMonth+'/'+dobDate);
var ageDifMs = Date.now() - birthday.getTime();
var ageDate = new Date(ageDifMs); // miliseconds from epoch
var actAge = Math.abs(ageDate.getUTCFullYear() - 1970);