浅谈JS之Error对象
Posted jianxian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈JS之Error对象相关的知识，希望对你有一定的参考价值。
【前言】
本文主要介绍下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对象的主要内容，如果未能解决你的问题，请参考以下文章