【前言】
本文主要介绍下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：
.
原文地址：https://www.cnblogs.com/jianxian/p/11278108.html
时间： 2024-10-08 23:40:13