如何使用 JavaScript/jQuery 进行简单的客户端表单验证？答案

【问题标题】：How to do simple client-side form validation using JavaScript/jQuery?如何使用 JavaScript/jQuery 进行简单的客户端表单验证？
【发布时间】：2014-07-03 07:12:19
【问题描述】：

我在 CodeCademy 上做了一个项目系列，我在该系列中找到了一个使用 JavaScript/jQuery 进行客户端表单验证的项目。

我的 HTML 是：

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
  <link rel='stylesheet' href='stylesheet.css' type='text/css'/>
  <script type='text/javascript' src='script.js'></script>
</head>
<body>
 <form>
  First Name : <input type='text' id='fname' placeholder='Enter First Name'><br><br>
  Last Name : <input type='text' id='lname' placeholder='Enter Last Name'><br><br>
  Age : <input type='text' id='age' placeholder='Age'><br><br>
  Sex : <input type='radio' class='sex'> Male <input type='radio' class='sex'> Female
 </form>
 <button id='submit'>Submit</button>
</body>
</html>

我的 JavaScript/jQuery 是：

$(document).ready(function()
{
 var fname = document.getElementById('fname').val();
 var lname = document.getElementById('lname').val();
 var age = document.getElementById('age').val();
 /*Do not know how to get element by class and that too, two different type. Have to check if user chose anything or not*/

  $("#submit").click(function()
  {
   if(fname.length === 0)
   {
    alert("Please input a first name");
   }
   else if(lname.length === 0)
   {
    alert("Please input a last name");
   }
   else if(age.length === 0)
   {
    alert("Please input an age");
   }
  });
});

我不需要非常复杂的代码，如果那里有问题或需要添加一些内容，请在 HTML 部门帮助我。

另外，我不知道如何在一个类中获取不同的元素。我已经在我的 jQuery 中对此发表了评论，所以如果可以，请提供帮助。

这是 CodeCademy 项目中的一个问题，也是很多 JS 和 jQuery 新手遇到问题的地方，所以如果你能提供帮助，它将帮助很多人，而不仅仅是我。

谢谢！

【问题讨论】：

标签： javascript jquery html css web

【解决方案1】：

function validate() {
    var scheduledOn = $("#ScheduledOn").val();
    var status = $(".Status option:selected").text();
    var result = true;

    if (id == "") {
        var scheduledOn = $("#ScheduledOn").val();
        var category = $(".categoryList option:selected").text();
        var activityTask = $(".activityTaskList option:selected").text();

        var lead = $("#LeadID").val();
        var agent = $("#AgentID").val();

        if (category == "Select Category") {
            $("#categoryValidation").show();
            $("#categoryValidation").text("The Category field is required");
        }
        else {
            $("#categoryValidation").hide();
        }

        if (category == "Agent Recruitment" || category == "Direct Sales" || category == "Joint Field Work" || category == "Select Category" || category == "Agent Development") {
            var activityTask = $(".activityTaskList option:selected").text();

            if (activityTask == "Select Activity Task") {
                $("#activityTaskValidation").show();
                $("#activityTaskValidation").text("The Activity Task field is required");
            }
            else {
                $("#activityTaskValidation").hide();
            }
        }

        if (category == "Joint Field Work") {
            if (agent == "" || agent == "Select Agent") {
                $("#agentValidation").show();
                $("#agentValidation").text("The Agent field is required");
                result = false;
            }
            else {
                $("#agentValidation").hide();
            }
        }

        if (category == "Joint Field Work") {
            if (lead == "" || lead == null || lead == "Select Lead") {
                $("#leadValidation").show();
                $("#leadValidation").text("The Lead field is required");
                result = false;
            }

            else {
                $("#leadValidation").hide();
            }
        }

        if (category == "Agent Recruitment" || category == "Agent Development") {
            if (agent == "" || agent == "Select Agent") {
                $("#agentValidation").show();
                $("#agentValidation").text("The Agent field is required");
                result = false;
            }
            else {
                $("#agentValidation").hide();
            }
        }

        if (category == "Direct Sales") {
            if (lead == "" || lead == "Select Lead" || lead == null) {
                $("#leadValidation").show();
                $("#leadValidation").text("The Lead field is required");
                result = false;
            }
            else {
                $("#leadValidation").hide();
            }
        }

        if (scheduledOn == "" || scheduledOn == null) {
            $("#scheduledOnValidation").show();
            $("#scheduledOnValidation").text("The Scheduled On field is required");
            result = false;
        }
        else if (Date.parse(scheduledOn) <= Date.now()) {
            $("#scheduledOnValidation").show();
            $("#scheduledOnValidation").text("The Scheduled On field should be greater than current date time");
            result = false;
        }
        else {
            $("#scheduledOnValidation").hide();
        }

        return result;
    }
    else {
        var scheduledOn = $("#NewScheduledOn").val();
        var status = $(".Status option:selected").text();

        if (document.getElementById("SetAppointment_Y").checked) {
            var activityTask = $(".activityTaskList").val();

            if (activityTask == null || activityTask == "") {
                $("#activityTaskValidation").show();
                $("#activityTaskValidation").text("The Activity Task field is required");
                result = false;
            }
            else {
                $("#activityTaskValidation").hide();
                $("#scheduledOnValidation").hide();
            }

            if (status != null && (scheduledOn == "" || scheduledOn == null)) {
                $("#scheduledOnValidation").show();
                $("#scheduledOnValidation").text("The Scheduled On field is required");
                $("#statusValidation").hide();
                result = false;
            }
            else if (Date.parse(scheduledOn) <= Date.now()) {
                $("#scheduledOnValidation").show();
                $("#scheduledOnValidation").text("The Scheduled On field should be greater than current date time");
                result = false;
            }
            else {
                $("#scheduledOnValidation").hide();
                $("#statusValidation").show();
            }
        }
    }

    return result;
}

【讨论】：

【解决方案2】：

这是使用 jquery 进行表单验证的非常简单的方法

// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",

      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: {
        required: "Please provide a valid user name",
        email: "Please enter a valid email address"
      }
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Styles */

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}

label.error {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js'></script>
<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" />
    <button type="submit">Register</button>
  </form>
</div>

【讨论】：

【解决方案3】：

您似乎同时问了几个问题。

作为 suzonraj，指出您需要 document.getElementsByClass 来按类名获取元素，正如 Felix 指出的那样，您需要将数据查找放在您的 .click 事件中，以便获取当前而不是页面 @987654324 @ 价值。

我将补充一点，您应该将name 参数添加到您的单选框，这样它们实际上就可以像单选框一样工作——单击另一个框时将其关闭。有了这个，你可以使用document.getElementsByName，这正是你想要的收音机收藏。

就验证而言，您需要按名称或类遍历元素数组，然后验证至少有一个是.checked。

这是一个基于 Felix 分享的代码的示例：http://jsfiddle.net/5zqW7/8/

还有一个补充，就是对所有元素进行验证，而不是只在第一个失败的元素之前进行。这对用户来说更具交流性，因为它将识别所有错误的字段，而不仅仅是第一个，点击提交，然后是第二个，依此类推。在真实的形式中，无论如何，你的声音可能比alert() 要小。这对于您的任务可能不是必需的。

【讨论】：

这一行是什么意思？ (!current.checked && i == (len-1) ?
这是检查两件事。首先，如果我们没有选中的收音机，我们只需点击列表中的最后一个元素。换句话说，我们浏览了整个列表，在最后一项上，我们仍然没有看到选中的单选项。

【解决方案4】：

从您的示例中，按类名获取元素

var lists = document.getElementsByClassName("sex");

要访问特定值，请使用 lists[0].value 它将返回“男性”或 lists[1].value 将返回“女性”

如果您使用本机/纯 javascript，请使用 .value 而不是 val() 。 val() 仅适用于 jquery

【讨论】：

我想检查用户是否勾选了两者中的任何一个。

【解决方案5】：

您需要使用.value 而不是.val()，因为您使用的是纯Javascript：

var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var age = document.getElementById('age').value;

如果你想使用.val() 方法，那么你需要一个 jQuery 对象：

var fname = $('#fname').val();
var lname = $('#lname').val();
var age = $('#age').val();

您还需要将这些变量放入.click() 处理程序中以获取这些文本框的更新值，目前您只检索页面加载时始终等于0 的值：

$(document).ready(function () {
    $("#submit").click(function () {
        var fname = document.getElementById('fname').value;
        var lname = document.getElementById('lname').value;
        var age = document.getElementById('age').value;

        if (fname.length == 0) {
            alert("Please input a first name");
        } else if (lname.length == 0) {
            alert("Please input a last name");
        } else if (age.length == 0) {
            alert("Please input an age");
        }
    });
});

Fiddle Demo

【讨论】：

我更正了，但现在即使我输入名字，它也会说请输入名字。
你查看我的演示了吗？您需要将变量放在点击处理程序中以实时获取文本框中的值。请再次检查我的答案。
对不起，我没有看那个。以及如何检查用户是否勾选了性别选项？我不知道该怎么处理。两种无线电类型输入的同一类中有两个选项。