必须填写输入 - Html

简介

在前端开发中，输入表单是必不可少的功能之一。而输入表单最基本的要求是，输入框不能为空。因此我们需要在前端页面上对输入框进行必填校验。本文将介绍3种在 HTML 中实现必填校验的方法。

方法一：required 属性

在 HTML5 中，为 input 标签新增了 required 属性，用于定义输入框是否为必填项。如下所示：

<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>

使用 required 属性定义的输入框，在提交表单时如果为空，浏览器会弹出提示框提醒用户必须填写。

方法二：JavaScript 校验

在 HTML 中使用 JavaScript 进行必填校验的方法如下所示：

<!-- 输入框添加 id 属性 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<!-- 点击按钮时调用 JavaScript 函数进行校验 -->
<button onclick="checkInput()">提交</button>

<script>
function checkInput() {
  var username = document.getElementById("username").value;
  if (username == "") {
    alert("用户名不能为空");
  } else {
    alert("提交成功");
  }
}
</script>

在上述代码中，我们为输入框添加了 id 属性，然后在 JavaScript 中获取输入框的值，判断是否为空，如果为空则弹出提示框，否则提交表单。

方法三：jQuery 插件

jQuery 是一个广泛应用于前端开发的 JavaScript 框架，它库中的 validate 插件可以方便地实现表单验证。

<form id="myform" method="post" action="">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <button type="submit">提交</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
  $("#myform").validate({
    rules:{
      username:{
        required:true
      }
    },
    messages:{
      username:{
        required:"用户名不能为空"
      }
    }
  });
});
</script>

在上述代码中，我们引入了 jQuery 和 validate 插件，然后在 JavaScript 中编写了表单验证的配置信息。在页面加载完成后，validate 插件会根据配置信息对表单进行验证。

总结

三种必填校验的方式都有效，你可以根据业务需要灵活选择。用最简单的方式实现必填校验，会让你的开发更简单，用户体验更好。