码迷,mamicode.com
首页 > Web开发 > 详细

浅谈JS之Error对象

时间:2019-07-31 18:53:02      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:order   错误输出   png   eve   click   bsp   一个   UNC   语言   

【前言】

   本文主要介绍下JS的Error name相关属性.
   当 JS 引擎执行 JS代码时,会发生各种错误。

①语法错误,通常是程序员造成的编码错误或错别字;  
②拼写错误或语言中缺少的功能(可能由于浏览器差异);  
③来自服务器或用户的错误输出而导致的错误;  
④由于许多其他不可预知的因素; 

    当发生错误时,JS通常会停止并产生错误消息。技术术语是这样描述的:JavaScript 将抛出异常(抛出错误)。JS实际上会创建一个Error对象,该对象带有两个属性name和message。

【主体】

(1)Error对象
    JS拥有当错误发生时提供错误信息的内置 error 对象,error 对象提供两个有用的属性:name 和 message。

 

(2)Error的name属性值

   技术图片

 

(3)try 和 catch

    try 用于定义在执行时进行错误测试的代码块,catch 语句定义当 try 代码块发生错误时,所执行的代码块。

    注意:JS语句 try 和 catch 是成对出现的,否则会出现报错。技术图片

翻译为未捕获的语法错误:缺少捕获或最后尝试

   try与catch捕获异常可以用于表单验证,具体案例参见文章底部---→案例1

   

 

 

 

 

(4)

 

 

(5)

 

 

 

案例1:

<!DOCTYPE html>
<html>
<head>
  <title>es6</title>
  <style type="text/css">
    *{
      margin: 0;padding: 0;
    }
    .login_box{
      width: 600px;
      height: auto;
      margin: 100px auto;
      border: 1px solid black;
    }
    .user_info{
      width: 100%;
      height: auto;
      padding: 10px;
      box-sizing: border-box;
    }
    .user_info i{
      font-size: 14px;
      color: red;
      margin-left: 10px;
    }
    .user_info>input{
      width: 360px;
      height: 30px;
      text-align: left;
      padding-left: 10px;
    }
    .login_box>input{
      width: 30%;
      height: 30px;
      display: block;
      margin: 10px auto;
    }
  </style>
</head>
<body>
  <form class="login_box">
    <div class="user_info">
      账号:<input type="text" name="user_name" placeholder="请输入账号"><i></i>
    </div>
    <div class="user_info">
      密码:<input type="password" name="user_pwd" placeholder="请输入密码"><i></i>
    </div>
    <input type="submit" value="登录"></submit>
  </form>
  <script type="text/javascript">
    var user_name = document.querySelector(input[name="user_name"]);
    var user_pwd = document.querySelector(input[name="user_pwd"]);
    var user_submit = document.querySelector(input[type="submit"]);
    var login_box = document.querySelector(.login_box);
    /* 账号验证 */
    user_name.addEventListener(blur,user_name_test,false);
    function user_name_test(){
      user_name.nextElementSibling.innerHTML = ‘‘;
      try {
        const name = user_name.value.replace(/ /g,‘‘);/*g表示过滤全部空格*/
        if(name == ‘‘){
          throw 账号为空;
          return false;
        }else if(name.length >= 11){
          throw 最大长度为11;
          return false;
        }else{
          return true;
        }
      }catch(error){
        user_name.nextElementSibling.innerHTML = error;
      }
    }
    /* 密码验证 */
    user_pwd.addEventListener(blur,user_name_pwd,false);
    function user_name_pwd(){
      user_pwd.nextElementSibling.innerHTML = ‘‘;
      try {
        const pwd = user_pwd.value.replace(/ /g,‘‘);/*g表示过滤全部空格*/
        if(pwd == ‘‘){
          throw 密码为空;return false;
        }else if(pwd.length < 6){
          throw 最短为6位;return false;
        }else if(pwd.length >= 10){
          throw 最长为10位;return false;
        }else{
          return true;
        }
      }catch(error){
        user_pwd.nextElementSibling.innerHTML = error;
      }
    }
    /* 表单提交 */
    user_submit.addEventListener(click,function(event){
      const user_name = user_name_test();
      const user_pwd = user_name_pwd();
      if(user_name&&user_pwd){
        login_box.submit(function(event) {
           /* Act on the event */ 
        });
      }else{
        event.preventDefault();/*禁止表单提交*/
      }
    },false);
  </script>
</body>
</html>

案例2:

 

.

浅谈JS之Error对象

标签:order   错误输出   png   eve   click   bsp   一个   UNC   语言   

原文地址:https://www.cnblogs.com/jianxian/p/11278108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!