Question

在我工作的页面上，有很多输入表单。

我想在提交前检查用户输入。

实施例

HTML / PHP

<input type="text" name="adress" id="adress">
<input type="text" name="amount" id="amount">

实际上我在Javascript中执行以下操作

的Javascript

function dataValidation() {
error=false;
var adress = document.getElementById('adress').value;
var amount = document.getElementById('adress').value;
if (adress == ""){
error=true;
}
if (amount >0 && amount < 999){
}
else {
error=true;
}
if (error == false){
document.forms["myForm"].submit();
}
}

所以，基本上这对我来说很好，但问题是，我必须为每个表单创建该函数，并为每个字段添加一个IF

所以，我正在寻找更好的解决方案

创意1：添加一个列表，提供输入类型，例如

adress = not empty,
amount = >0 && <999,

然后创建一个函数，该函数检查该列表的所有字段

创意2：将标签或其他内容直接添加到输入字段，它应包含的内容。然后创建一个检查所有字段的函数

有人知道如何做到这一点，并想帮助/建议我吗？

Answer 1

你可以通过jquery尝试这个：你的HTML：

<input type="text" name="adress" id="adress">
<input type="text" name="amount" id="amount">
    <input type="button" id="check_input">

并对所有输入字段应用jquery

 $("#check_input").click(function() {
       $("input").each(function() {
          var element = $(this);
       if(element.val() == "") {
          element.css("border","1px solid red");
          element.attr("placeholder","Field is empty"); 
          return false;
          }

          });
          });

Answer 2

如果您有多个具有相同字段的表单尝试从外部调用验证，那将减少您的一些工作，除了我不知道任何其他方法所以让我们等待其他人回复

Answer 3

您可能想考虑使用HTML5。

HTML5可以节省编写JS验证的时间。例如，要验证电子邮件地址，您可以使用以下内容：

<input type="email" name="email" required />

注意类型=＆＃34;电子邮件＆＃34;并要求。您可以将HTML5表单属性与正则表达式模式一起使用，而不是使用js进行验证。

例如，如果我想创建一个只接受一个数字和3个大写字母的输入字段，我可以使用RegEx模式轻松完成：

<input type="text" pattern="[0-9][A-Z]{3}">

在HTML5和RegEx上阅读更多内容。它可以帮助你。

以良好可靠的方式验证表单输入

3 个答案: