表单验证

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>表单验证</title>
  <style>
  .item{
  margin-top: 15px;
  }
  .letterSpace{
  letter-spacing: 2em;
  }
  input{
  width: 200px;
  height: 26px;
  transition: .5s
  }
  .err{
  font-size: 12px;
  color: red;
  }
  .register{
  border-radius: 10px;
  cursor: pointer;
  }
  </style>
  </head>
  <body>
  <h3>表单提交验证</h3>
  <form action="#" method="post">
  <div class="item">
  <span class="letterSpace">姓</span>名：
  <input type="text" name="userName" id="userName">
  <span class="err"></span>
  </div>
  <div class="item">
  <span class="letterSpace">密</span>码：
  <input type="password" name="password" id="password">
  <span class="err"></span>
  </div>
  <div class="item">
  确认密码：
  <input type="password" name="confrimPWD" id="confrimPWD">
  <span class="err"></span>
  </div>
  <div class="item">
  <span class="letterSpace">生</span>日：
  <input type="date" name="birthday" id="birthday">
  <span class="err"></span>
  </div>
  <div class="item">
  电话号码：
  <input type="tel" name="tel" id="tel">
  <span class="err"></span>
  </div>
  <div class="item">
  家庭住址：
  <input type="text" name="address" id="address">
  <span class="err"></span>
  </div>
  <div class="item">
  <button class="register">用户注册</button>
  </div>
  </form>
  <script>
  // 获取DOM元素
  let form = document.forms[0];
  let err = document.getElementsByClassName("err");
  let input = document.getElementsByTagName("input");
  /* ------------------------------------------------------------------*/
  // 用户名焦点事件
  let userNameholder = function(){
  this.setAttribute("placeholder","以字母开头，长度为4-11位");
  this.style.width = 250 + "px";
  }
  // 用户名验证
  let userNameCheck = function(){
  this.setAttribute("placeholder","");
  let reg = /^[A-Za-z]\w{3,10}$/;
  if(reg.test(userName.value) || userName.value === "")
  {
  err[0].innerHTML = "";
  }
  else{
  err[0].innerHTML = "用户名必须由字母开头，长度为4-11位";
  }
  // 如果输入框里面没有内容，要将长度还原
  if(userName.value === "")
  {
  this.style.width = 200 + "px";
  }
  }
  userName.addEventListener("focus",userNameholder,false);
  userName.addEventListener("blur",userNameCheck,false);
  /* ------------------------------------------------------------------*/
  // 密码焦点事件
  let passwordholder = function(){
  this.setAttribute("placeholder","密码长度为6-30位");
  this.style.width = 250 + "px";
  }
  // 验证密码事件
  let passwordCheck = function(){
  this.setAttribute("placeholder","");
  let reg = /^\w{6,30}$/;
  if(reg.test(password.value) || password.value==="")
  {
  err[1].innerHTML = "";
  }
  else{
  err[1].innerHTML = "密码长度最少6位，最多30位组成";
  }
  // 如果输入框里面没有内容，要将长度还原
  if(password.value === "")
  {
  this.style.width = 200 + "px";
  }
  }
  password.addEventListener("focus",passwordholder,false);
  password.addEventListener("blur",passwordCheck,false);
  /* ------------------------------------------------------------------*/
  // 二次密码焦点事件
  let confrimPWDholder = function(){
  this.setAttribute("placeholder","请再次输入您的密码");
  this.style.width = 250 + "px";
  }
  // 二次密码验证事件
  let confrimPWDCheck = function(){
  this.setAttribute("placeholder","");
  if(confrimPWD.value === "" || confrimPWD.value === password.value)
  {
  err[2].innerHTML = "";
  }
  else{
  err[2].innerHTML = "两次输入的密码不一致";
  }
  // 如果输入框里面没有内容，要将长度还原
  if(confrimPWD.value === "")
  {
  this.style.width = 200 + "px";
  }
  }
  confrimPWD.addEventListener("focus",confrimPWDholder,false);
  confrimPWD.addEventListener("blur",confrimPWDCheck,false);
  /* ------------------------------------------------------------------*/
  // 生日
  let birthlonger = function(){
  this.style.width = 250 + "px";
  }
  let birthshort = function(){
  if(birthday.value === "")
  {
  this.style.width = 200 + "px";
  }
  }
  birthday.addEventListener("focus",birthlonger,false);
  birthday.addEventListener("blur",birthshort,false);
  /* ------------------------------------------------------------------*/
  // 电话号码焦点事件
  let telholder = function(){
  this.setAttribute("placeholder","请填写您的手机号码");
  this.style.width = 250 + "px";
  }
  let telCheck = function(){
  let content = parseInt(tel.value);
  this.setAttribute("placeholder","");
  let reg = /^1[3578]\d{9}$/;
  if(reg.test(content) || tel.value === "")
  {
  err[4].innerHTML = "";
  }
  else{
  err[4].innerHTML = "电话号码格式不正确";
  }
  // 如果输入框里面没有内容，要将长度还原
  if(tel.value === "")
  {
  this.style.width = 200 + "px";
  }
  }
  tel.addEventListener("focus",telholder,false);
  tel.addEventListener("blur",telCheck,false);
  /* ------------------------------------------------------------------*/
  // 家庭地址焦点事件
  let addressholder = function(){
  this.setAttribute("placeholder","请填写您的家庭地址");
  this.style.width = 250 + "px";
  }
  let addressCheck = function(){
  this.setAttribute("placeholder","");
  if(address.value === "")
  {
  this.style.width = 200 + "px";
  }
  }
  address.addEventListener("focus",addressholder,false);
  address.addEventListener("blur",addressCheck,false);
  /* ------------------------------------------------------------------*/
  // 提交验证
   
  form.onsubmit = function(){
  if(password.value !== confrimPWD.value)
  {
  err[2].innerHTML = "两次输入的密码不一致";
  }
  for(let i=0;i<input.length;i++)
  {
  if(input[i].value === "")
  {
  alert("有内容还没有填写");
  return false;
  }
  }
  for(let i=0;i<err.length;i++)
  {
  if(err[i].innerHTML !== "")
  {
  alert("请正确填写内容");
  return false;
  }
  }
  alert("表单提交成功");
  return true;
  }
  </script>
  </body>
  </html>
posted @ 2019-09-12 15:55  小样Q  阅读(204)  评论(0)    收藏  举报