javascript - 如何使用 JavaScript 根据用户输入的值检查数组值?

标签 javascript html forms

JavaScript 和 HTML5 初学者(之前学过,直到今天才使用)。

所以,我花了一些时间在网上寻找这个问题的答案,但找不到我正在寻找的东西(也许我错过了一些东西)。我遇到的问题是,我创建了一个表单,要求用户提供姓名、ID 和电子邮件(如果需要)。现在,在现实世界中,ID 和名称将存储在数据库中,用户输入的数据将根据数据库进行检查;但由于这是一项类作业,我们被要求创建一个由三名学生组成的数组,以便根据用户输入数据进行检查。

这是我的 HTML5 网站代码:

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Student Transaction Form</title>
<meta charset="UTF-8"/>
<style>
p  {
    color: red;
    font-family: Times New Roman, serif;
    font-size: 160%;
 }
</style>
</head>
<body>
<div style="text-align:center;">
<FORM METHOD="POST" id="the-form" action="#" >
<TABLE BORDER="1" align = "center" >
<caption style="font-size:30px">Student Transaction Form</caption>
  <TR>
    <TD style="font-size:18px">Student Name:</TD>
    <TD>
      <INPUT TYPE="TEXT" required = "required" placeholder = "Input Name" NAME="name" SIZE="25">
    </TD>
	<TD style="font-size:18px"><p>Required</p></TD>
  </TR>
  <TR>
    <TD style="font-size:18px">Student Number:</TD>
    <TD><INPUT TYPE="TEXT" pattern=".{8,8}" required = "required" placeholder = "Input Number" NAME="number" SIZE="25"></TD>
	<TD style="font-size:18px"><p>Required</p></TD>
  </TR>
  <TR>
    <TD style="font-size:18px">Student Email:</TD>
    <TD><INPUT TYPE="email" NAME="email" SIZE="25" ></TD>
	<TD style="font-size:18px">
	    <script type="text/javascript">
        function ShowHideDiv(chkEmail) 
		{
            var dvEmail = document.getElementById("dvEmail");
            dvEmail.style.display = chkEmail.checked ? "block" : "none";
        }
	    </script>
	
<div id="dvEmail" style="display: none">
    <p>Required</p>
    </div>
    </TD>
  </TR>
  <TR>
  <TD></TD>
    <TD>
 <form id = "form1">
 <label for="chkEmail">
    <input type="checkbox" id="chkEmail" onclick="ShowHideDiv(this)" />
    Email me a transaction comfirmation
</label>
</form></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>
</body>

目前的代码只是确保密码 (ID) 有效(有 8 个字符),并且如果选中该复选框,则需要电子邮件。

所以,我的问题是:如何创建一个学生姓名和 ID 相互关联的数组(这意味着,如果姓名正确,但 ID 属于不同的人,则会标记为不正确)以及如何对用户输入数据进行检查?

举个例子,如果用户在 ID 框中输入 Bill Smith 名称,并在 ID 框中输入 59683471,则在提交时会检查 Bill Smith 是否具有ID 59683471 已存在;如果不是,则拒绝提交。如果它们确实存在,那么一切都很好,可以提交表单。

谢谢。

编辑:

功能:

<script type ="text/javascript">
function checkall(Submit)
{
var name = document.getElementById("studentName").value;
var id = document.getElementById("studentNumber").value;
	var studentArray = 
	[
	{"Name": "Thomas Livshits", "Id": "33138463"},
	{"Name": "James Maro", "Id": "33138743"},
	{"Name": "Bill Smith", "Id": "33138356"},
	];
studentArray.forEach(function(student){
    if(id == student.Id && name == student.Name)
        console.log("Found a match for student: " + student.Name);
});
}
</script>

对于提交部分:

<P><INPUT TYPE="SUBMIT" id = "Submit" VALUE="Submit" NAME="B1" onsubmit = "checkall(this); return false;"></P>

最佳答案

您可能想要创建一个如下所示的嵌套数组:

var userArray = [
    {name: "firstUser", ID: "firstID", email: "firstEmail"},
    {name: "secUser", ID: "secID", email: "secEmail"}, ...
]

然后准备一个循环:

var name = document.getElementById("NAME_DIV").value;
var id = document.getElementById("ID_DIV").value;
var email = document.getElementById("EMAIL_DIV").value;

for (i=0; i<userArray.length; i++) {
    var a = userArray[i].name;
    var b = userArray[i].ID;
    var c = userArray[i].email;

    if (a == name && b == id && c == email) {
         //do something
    };
};

希望这有帮助!在我的手机上输入的,因此可能是一个小语法错误,但逻辑应该可以满足您的需求!

关于javascript - 如何使用 JavaScript 根据用户输入的值检查数组值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42394728/

相关文章:

javascript - 从 Canvas Javascript 获取图像

JavaScript 通过搜索另一个自定义属性来更改自定义属性的值

c# - Windows 8 C# - 以字符串形式检索网页源

jquery - 通过 event.preventDefault() 阻止表单提交;不工作

forms - 当我们使用 "initState()` 和 "GetX"时 "statelessWidget"的替代方案是什么?

javascript - 如何在 Google Charts 仪表板中运行两个查询并使用控件显示两个图表

javascript - 缩放到 bbox 的下拉菜单 (d3.js)

javascript - 我无法从第一个 "/"路由到模板。我该如何解决这个问题?

javascript - 模态错误....为正确的模态视图发送 id。如何做?

JQuery .text不会出现在浏览器中,仅出现在firebug中,不会被发布