Javascript的表单验证-提交表单

Javascript表单验证是Web开发中的重要环节，可以提升用户体验和网站安全性。以下是通过JS实现表单验证和提交的攻略。

步骤1：HTML表单

首先，在HTML中定义表单元素，包括输入框、单选框、多选框、下拉框等。在表单中设置提交按钮，并添加JS函数来验证表单数据是否符合需要。示例代码如下：

<form action="submit.php" method="post" onsubmit="return validateForm()">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input type="submit" value="Submit">
</form>

步骤2：JS表单验证

接着，编写JS函数来验证表单数据是否符合要求。例如，可以检查用户名和密码是否为空，是否符合长度要求等。在JS函数中，如果表单数据不符合要求，则返回false，阻止表单提交。示例代码如下：

function validateForm() {
  var username = document.getElementsByName("username")[0].value;
  var password = document.getElementsByName("password")[0].value;

  if (username == "" || password == "" || username.length < 6 || password.length < 6) {
    alert("请正确填写表单数据");
    return false;
  }
  return true;
}

步骤3：提交表单

最后，当表单数据验证通过后，JS函数返回true，表单数据会被提交到对应的服务器脚本文件中。在服务器端完成相应的业务逻辑处理后，返回结果给客户端网页。示例代码如下：

<?php
  $username = $_POST["username"];
  $password = $_POST["password"];

  // 在此处添加相应的业务逻辑处理
  // ...

  echo("操作成功");
?>

示例一：验证电子邮件地址

下面展示一个表单验证电子邮件地址的JS函数：

function validateEmail() {
  var email = document.getElementsByName("email")[0].value;
  var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

  if (!pattern.test(email)) {
    alert("请填写正确格式的电子邮件地址");
    return false;
  }
  return true;
}

这个函数使用一个正则表达式来验证电子邮件地址是否符合格式要求，只有符合要求的地址才能提交表单。

示例二：验证手机号码

下面展示一个表单验证手机号码的JS函数：

function validatePhone() {
  var phone = document.getElementsByName("phone")[0].value;
  var pattern = /^1[3456789]\d{9}$/;

  if (!pattern.test(phone)) {
    alert("请填写正确格式的手机号码");
    return false;
  }
  return true;
}

这个函数使用一个正则表达式来验证手机号码是否符合格式要求，只有符合要求的号码才能提交表单。