如何通过 JavaScript 验证此表单？

Question

我用 HTML/CSS/PHP 完成了一个简单的、基于国际象棋的业余爱好项目。它根据给定棋子的类型、位置和颜色列出并显示其可能的移动。不过，该程序不考虑棋盘上的任何其他棋子。

http://freemusing.com/chess/

如您所见，该表单工作正常并且具有服务器端验证。我的问题是我对 JavaScript 不够熟悉，无法从头开始翻译表单的两个文本字段的服务器端验证[为了清晰起见进行了编辑]。有人可以帮助在 JavaScript 中复制我的 PHP 验证代码两个输入吗？我不想使用任何框架，因为我想最终精通 JS。

• 以下是该表单的 PHP 代码： http://pastebin.com/embed_js.php?i=0LRJxkFg
• 下面是用于处理的 PHP 代码（参见第 76-120 行）http://pastebin. com/embed_js.php?i=pksn9xPd

感谢任何帮助。

Answer 1

好的，这是第一个字段的验证代码。 （即兴写下，在我的脑海中它可以工作，但现实生活有时很糟糕。而且我现在已经习惯使用 jQuery，很难回到基础知识。）

var validatePiece = function (value) {
  var legalValues = " p pawn b bishop r rook n knight q queen k king ";
  return legalValues.indexOf(" " + value + " ") !== -1;
};

这样调用它：

var isPieceValid = validatePiece(document.getElementById("txt-piece").value;

你必须在提交表单的处理程序。这是处理程序：

var validateForm = function () {
  var isPieceValid = validatePiece(document.getElementById("txt-piece").value);
  var isSquareValid = validateSquare(...); 
  return isPieceValid && isSquareValid;
};

并更改表单元素的定义以在提交时调用它：

<form action="chess_moves.php" method="get" onsubmit="return validateForm();">

我将错误消息的显示留给读者作为一个简单的练习。