JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JavaScript 创建对象 JavaScript 性能

JavaScript 表单验证

HTML表单验证可以通过JavaScript完成。

HTML表单通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。

但是很可能某些用户可能不会输入您期望的数据。

为了避免对服务器资源造成不必要的压力，您可以使用JavaScript在客户端（用户系统）上验证表单数据。

在将输入发送到Web服务器之前，由Web浏览器执行客户端验证。

输入已发送到服务器后，服务器端验证由Web服务器执行。

示例

  <div class="wrapper">
    <h2>Create an account</h2>
    <label for="username"><b>姓名</b></label>
    <input type="text" placeholder="输入用户名" name="uname" id="username" required>

    <label for="useremail"><b>Email</b></label>
    <input type="email" placeholder="输入Email" name="uemail" id="useremail" required>

    <label for="userpwd1"><b>Password</b></label>
    <input type="password" placeholder="输入密码" name="psw" id="userpwd1" required>
    <input type="password" placeholder="确认密码" name="cpsw" id="userpwd2" required>

    <p style="margin-top: 10px;">
       <input type="radio" name="gender" id="female" value="female" checked><label for="female">女</label>
       <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
    </p>
    <button type="submit">注册</button>
  </div>

  <div class="footer">
    <div>已经有一个帐户? <a href="#">登录</a></div>
  </div>
</form>

<script>
function validateForm() {
  let name = document.getElementById("username").value;
  let email = document.getElementById("useremail").value;
  let pswd1 = document.getElementById("userpwd1").value;
  let pswd2 = document.getElementById("userpwd2").value;
  
  if(name == "") {
    alert("Name must be filled out");
    return false;
  }
  if(email == "") {
    alert("必须填写电子邮件");
    return false;
  }
  if(pswd1 !== "" || pswd2 !== "") {
    if(pswd1 !== pswd2) {
      alert("Password didn't match");
      return false;      
    }
  } else {
    alert("密码必须填写");
    return false;  
  }

  return true;
}
</script>

测试看看 ‹/›

典型的验证任务是：

用户是否填写了所有必填字段？
用户输入了有效数据吗？

在此代码中，如果输入字段（用户名）为空，此函数将警告消息并返回false，以防止提交表单：

JavaScript示例：

  function validateForm() {
  let x = document.getElementById("uname").value;
  if (x == "") {
    alert("名称必须填写");
    return false;
  }
  }

提交表单时可以调用该函数：

HTML表单示例：

示例

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
  <label for="uname">Name:</label>
  <input type="text" name="username" id="uname">
  <input type="submit" value="Submit">
</form>

测试看看‹/›

验证数字输入

JavaScript通常用于验证数字输入。

请输入1到10之间的数字：

验证电子邮件输入

JavaScript通常用于验证电子邮件地址。

请输入有效的电子邮件地址：

验证密码确认

JavaScript通常用于匹配密码确认。

自动HTML表单验证

HTML表单验证可以使用必填属性自动执行：

示例

<input type="text" name="demo" required>

测试看看‹/›

变更输入类型

您可以使用javascript 在<input type="password">和<input type="text">之间进行切换。

在密码字段中输入一个值，然后单击“显示密码”按钮：

HTML输入验证属性

HTML5引入了以下新的HTML属性：

属性	描述
disabled	指定应禁用输入元素
max	指定输入元素的最大值
min	指定输入元素的最小值
pattern	指定输入元素的值模式
required	指定输入字段需要一个元素

CSS验证伪选择器

CSS3引入了以下新的CSS伪选择器：

选择器	描述
:disabled	选择指定了“禁用”属性的输入元素
:invalid	选择具有无效值的输入元素
:valid	选择具有有效值的输入元素
:optional	选择未指定“必需”属性的输入元素
:required	选择指定了“必需”属性的输入元素

注意：客户端验证不能代替或代替服务器端验证。即使用户已经验证了表单数据，也应始终在服务器端验证表单数据，因为用户可以在其浏览器中禁用JavaScript。

JavaScript 创建对象 JavaScript 性能