JavaScript Form表单验证示例-实例在线编辑器(cainiaoplus.com)

<!DOCTYPE html>
<html>
<title>JavaScript Form表单验证示例 - 基础教程(cainiaoplus.com)</title>

<head>
<style>
* {box-sizing: border-box;}
.my-form {
   background-color: #fefefe;
   border: 5px solid #eee;
}
.wrapper {
   padding: 4px 20px 20px;
}
.footer {
   padding: 20px;
   background-color:#f1f1f1;
}
input[type=text], input[type=password], input[type=email] {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
}
button {
   background-color: #4CAF50;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: 100%;
   font-size: 16px;
}
</style>
</head>
<body>

<form class="my-form" action="demo-form.php" onsubmit="return validateForm()" method="POST">
  <div class="wrapper">
    <h2>注册账号</h2>
    <label for="username"><b>姓名</b></label>
    <input type="text" placeholder="输入用户名" name="uname" id="username" required>

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

<label for="userpwd1"><b>密码</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>

</body>
</html>