Java Web 7 JavaScript 7.7 事件监听 && 7.8 表单验证案例

Java Web

【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】

7 JavaScript

7.7 事件监听

HTML 事件是发生在 HTML 元素上的“事情”。

比如：页面上的 按钮被点击 、 鼠标移动到元素之上 、 按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。

7.7.1 事件绑定

JavaScript 提供了两种事件绑定方式：

• 方式一：通过 HTML标签中的事件属性进行绑定

  有一个按钮元素，在该标签上定义 事件属性 ，在事件属性中绑定函数。 onclick 就是 单击事件 的
  事件属性。 οnclick=‘on（）’ 表示该点击事件绑定了一个名为 on() 的函数

  ;
          } else {
              //不合符规则
              document.getElementById("username_err").style.display = '';
          }
  
          return flag;
      }
  
  
      //1. 验证密码是否符合规则
      //1.1 获取密码的输入框
      var passwordInput = document.getElementById("password");
  
      //1.2 绑定onblur事件 失去焦点
      passwordInput.onblur = checkPassword;
  
      function checkPassword() {
          //1.3 获取用户输入的密码
          var password = passwordInput.value.trim();
  
          //1.4 判断密码是否符合规则：长度 6~12
          var reg = /^\w{6,12}$/;
          var flag = reg.test(password);
  
          //var flag = password.length >= 6 && password.length <= 12;
          if (flag) {
              //符合规则
              document.getElementById("password_err").style.display = 'none';
          } else {
              //不合符规则
              document.getElementById("password_err").style.display = '';
          }
  
          return flag;
      }
  
  
      //1. 验证手机号是否符合规则
      //1.1 获取手机号的输入框
      var telInput = document.getElementById("tel");
  
      //1.2 绑定onblur事件 失去焦点
      telInput.onblur = checkTel;
  
      function checkTel() {
          //1.3 获取用户输入的手机号
          var tel = telInput.value.trim();
  
          //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
  
          //var flag = tel.length == 11;
          var reg = /^[1]\d{10}$/;
          var flag = reg.test(tel);
          if (flag) {
              //符合规则
              document.getElementById("tel_err").style.display = 'none';
          } else {
              //不合符规则
              document.getElementById("tel_err").style.display = '';
          }
  
          return flag;
      }
  
  
      //1. 获取表单对象
      var regForm = document.getElementById("reg-form");
  
      //2. 绑定onsubmit 事件
      regForm.onsubmit = function () {
          //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
  
          var flag = checkUsername() && checkPassword() && checkTel();
  
          return flag;
      }
  
  </script>