如何通过 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行）

任何帮助表示赞赏。

Answer 1

好的，这是第一个字段的验证码。 （写在袖口上，在我的脑海里它有效，但现实生活有时很糟糕。另外，我现在已经习惯使用 jQuery，很难让 go 回到基础。）

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();">

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