Question

在键入时，如何在字段旁边以任何颜色在表单旁边显示不正确或正确的单词？我正在努力做到这一点，因此当我输入与JS规则匹配的值时，它可以实时显示正确和错误的信息。

它应该在框旁边给出实时的正确或不正确的信息，如果它与规则匹配，则显示正确的信息

我的HTML：

<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box"  >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">

  <!-- user id -->
  <h2> Enter Info  </h2>
  <p> <span class="fieldName">UserID: </span>
  <input type="text" id="userid" name="userid" class="input">
  <span class="message"></span></p>

  <!-- -->
  <p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
  <p> <span class="fieldName"> Codes </span>
  <input type="text" id="code" name="code" class="input">
  <span class="message"></span></p>

  <!-- Number -->
  <p> <span class="fieldName"> Course Num (XXXX): </span>
  <input style="width: 4em;" id="number" type="text" name="number" class="input">
  <span class="message"></span></p>
  <hr>
  <p style="text-align:center;">  <button  id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
  <p style="text-align:center;" id="formError"> &nbsp; <p>
</form>
</div>
</body>
</html>

JS：

 window.onload = function() {


   $("userid").observe("keyup", enforceID);
   $("code").observe("keyup", enforcecode);
   $("number").observe("keyup", enforcenumbers);
   $("submitButton").observe("click", submitbtn);

}


function enforceID() {
  // fucntion must start with a letter and can be any number or letter after
  var re = /^[A-Z][A-Z][0-9]+/i;
}

function enforcecode() {
  // Only can use these Codes
  var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
  var codeType = $("codeType").value;
  codeType = codeType.toUpperCase();
}

function enforcenumbers() {
  //Only 4 numbers allowed
  var re = /^[0 -9][0 -9][0 -9][0 -9]$/

}

Answer 1

您可以在keydown事件上触发表单验证。

const form = document.getElementById('form');

document.getElementById('userid').addEventListener('keydown', event => {
  form.reportValidity();
}, false);

document.getElementById('code').addEventListener('keydown', event => {
  form.reportValidity();
}, false);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>

  <body>
    <form id="form">
      <label for="userid">User ID:</label>
      <input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
      <br />
      <label for="code">Code:</label>
      <input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
    </form>
  </body>
</html>

Javascript键盘表格

1 个答案: