Javascript键盘表格

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="[AZ]{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 个解决方案

解决方案1
0 2018-11-12 20:48:50

Javascript键盘表格

问题描述

1 个解决方案

解决方案1 0 2018-11-12 20:48:50

解决方案1
0 2018-11-12 20:48:50