1、JS try catch用法：异常处理：
（1）JavaScript 编程中的错误大致可以分为以下三种类型：
语法错误：也称为解析错误，一般是因为代码存在某些语法错误引起的。当发生语法错误时，代码会停止运行；
运行时错误：也称为异常，发生在程序运行期间，例如调用未定义的方法、读取不存在的文件等，发生运行时错误也会终止代码运行；
逻辑错误：是最难发现的一种错误，逻辑错误通常是因为代码存在瑕疵，导致程序输出意外的结果或终止运行。
（2）错误（Error）：是在代码运行之前出现的，如果代码有误，例如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。
异常（Exception）是在代码运行中出现的，例如调用某个未定义的方法、读取不存在的文件等。在出现异常之前，代码的运行并不受影响，当出现异常时，会在浏览器控制台输出错误信息，并终止程序的运行。
（3）JS 异常处理：
//如果 try 语句块中的代码发生错误，代码会立即从 try 语句块跳转到 catch 语句块中
//如果 try 语句块中代码没有发生错误，就会忽略 catch 语句块中的代码。
try {
// 可能会发生异常的代码
} catch(error) {
// 发生异常时要执行的操作
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
try {
var title = "JavaScript";
document.write(title);
// 调用一个未定义的变量
document.write(str);
// 若发生错误，则不会执行以下行
alert("所有语句都已成功执行。");
} catch(error) {
// 处理错误
//当 try 语句块中的代码出现异常时，会创建并抛出一个 Error 对象（例如 catch(error) 中的 error），对象中包含两个属性
//name：错误的类型；
//message：对错误的描述信息。
alert("错误信息: " + error.message);
}
// 继续执行下面的代码
document.write("<p>Hello World!</p>");
</script>
</body>
</html>（4） JS try catch finally 语句：
无论 try 语句块中的代码是否发生错误，finally 语句中的代码都会执行。
（5）JS 抛出错误：
JavaScript 中，不仅可以依赖 JavaScript 解析器来自动抛出错误，还可以手动抛出错误。抛出错误需要使用 throw 语句，语法格式如下：
throw expression;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
function squareRoot(number) {
// 如果数字为负数，则抛出错误
if(number < 0) {
throw new Error("抱歉，无法计算负数的平方根！");
} else {
console.log(Math.sqrt(number));
}
}
try {
squareRoot(16);
squareRoot(625);
squareRoot(-9);
squareRoot(100);
// 若抛出错误，则不会执行下面的行
console.log("所有函数都执行成功。");
} catch(e) {
// 处理错误
console.log(e.message);
}
</script>
</body>
</html>（6） JS 错误类型：
错误类型 ： 说明
EvalError 使用 eval（) 函数时发出错误，会抛出该错误
InternalError ： 由 JavaScript 引擎内部错误导致的异常，会抛出该错误
RangeError ： 范围错误，当使用了超出允许范围的数值时，会抛出该错误
SyntaxError ： 语法错误，当代码中存在任何语法错误时，会抛出该错误
TypeError ： 类型错误，当使用的值不是预期类型时，会抛出该错误，例如对数字调用字符串方法，对字符串调用数组方法等
URIError ： URI 错误，当使用 URI 相关函数但传入 URI 参数时，会抛出该错误
ReferenceError ： 参数错误，当尝试使用未定义的变量、函数、对象时，会抛出该错误2、表单验证：
使用 JavaScript 来验证提交数据（客户端验证）比将数据提交到服务器再进行验证（服务器端验证）用户体验要更好，因为客户端验证发生在用户浏览器中，无需向服务器发送请求，所以速度更快。
在开发过程中，无论是否进行客户端验证，都需要在服务器端对于用户提交的数据进行验证。
（1）使用 JavaScript 进行表单验证：
- 必填字段验证：确保必填的字段都被填写；
- 数据格式验证：确保所填内容的类型和格式是正确的、有效的。
（2）必填字段验证：
只需要通过程序来检查必填表单元素的值是否为空即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
.error{
color: red;
}
label{
display: inline-block;
width: 70px;
text-align: right;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post">
//<fieldset>元素在HTML中用于将表单内的相关元素组合在一起，并在视觉上与其他表单元素区分开来。
<fieldset>
//<legend>标签的主要用途是定义<fieldset>的标题。
<legend>注册:</legend>
<div class="row">
<label>用户名：</label>
<input type="text" name="name">
//<span>元素，它通常用于包含内联文本或短语。
<span class="error" id="nameErr"></span>
</div>
<div class="row">
<label>密码：</label>
<input type="password" name="pwd">
<span class="error" id="pwdErr"></span>
</div>
<div class="row">
<label>Email：</label>
<input type="text" name="email">
<span class="error" id="emailErr"></span>
</div>
<div class="row">
<label>手机号：</label>
<input type="text" name="mobile" maxlength="11">
<span class="error" id="mobileErr"></span>
</div>
<div class="row">
<label>验证码：</label>
<input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
<span class="error" id="captchaErr"></span>
</div>
<div class="row">
<input type="submit" value="注册">
</div>
</fieldset>
</form>
<script>
var captcha = getCaptcha(); // 生成验证码
// 清空 input 标签后的提示信息
var tags = document.getElementsByTagName('input');
//使用一个 for 循环遍历 tags 集合中的每一个 <input> 元素。
for (var i = 0; i < tags.length; i++) {
//为页面上所有的 <input> 元素添加 onchange 事件监听器。
//<input> 元素的值发生变化时，它会清除一个与当前 <input> 元素的 name 属性相关联的错误消息元素
//获取页面上所有的 <input> 元素，并将它们存储在一个名为 tags 的 HTMLCollection 对象中。
//对于每一个 <input> 元素，为其添加一个 onchange 事件监听器。这个监听器是一个匿名函数，它会在 <input> 元素的值发生变化时被调用。
tags[i].onchange = function(){
//通过 this.name 获取当前 <input> 元素的 name 属性值，然后拼接上 "Err" 来构造一个 id 值
var idname = this.name + "Err";
//使用 document.getElementById(idname) 获取与构造的 id 值相对应的 DOM 元素
/将该 DOM 元素的 innerHTML 属性设置为空字符串 ''，从而清空其中的内容（即清除任何可能的错误消息）。
document.getElementById(idname).innerHTML = '';
}
}
// 显示错误消息
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 验证表单数据
function validateForm() {
// 获取表单元素的值
var name = document.querySelector("input[name='name']").value;
var pwd = document.querySelector("input[name='pwd']").value;
var email = document.querySelector("input[name='email']").value;
var mobile = document.querySelector("input[name='mobile']").value;
var captcha = document.querySelector("input[name='captcha']").value;
if(name == "" || name == null){
printError("nameErr", "用户名不能为空");
return false;
}
if(pwd == "" || pwd == null){
printError("pwdErr", "密码不能为空");
return false;
}
if(email == "" || email == null){
printError("emailErr", "邮箱不能为空");
return false;
}
if(mobile == "" || mobile == null){
printError("mobileErr", "手机号不能为空");
return false;
}
if(captcha == "" || captcha == null){
printError("captchaErr", "验证码不能为空");
return false;
}
}
// 获取验证码
function getCaptcha() {
// 生成一个 0000 到 9999 之间的四位数
//使用 "0000" + Math.floor(Math.random() * 10000) 生成一个可能包含前导零的字符串。
//使用 .slice(-4) 来获取字符串的最后四个字符，确保验证码始终是四位数。
var cap = ("0000" + Math.floor(Math.random() * 10000)).slice(-4);
// 将验证码存储在一个局部变量中（如果需要全局访问，可以在函数外部声明变量）
//使用一个局部变量 captcha 来存储验证码，以避免潜在的命名冲突。
//如果你需要在函数外部访问这个值，可以在函数外部声明一个变量并在函数内部赋值给它
var captcha = cap;
// 将验证码显示在页面上的元素中
document.getElementById("captcha").innerHTML = captcha;
}
</script>
</body>
</html>（3）数据格式验证：
通过正则表达式来验证用户所填的数据，是否符合要求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
.error{
color: red;
}
label{
display: inline-block;
width: 70px;
text-align: right;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post">
<fieldset>
<legend>注册:</legend>
<div class="row">
<label>用户名：</label>
<input type="text" name="name">
<span class="error" id="nameErr"></span>
</div>
<div class="row">
<label>密码：</label>
<input type="password" name="pwd">
<span class="error" id="pwdErr"></span>
</div>
<div class="row">
<label>Email：</label>
<input type="text" name="email">
<span class="error" id="emailErr"></span>
</div>
<div class="row">
<label>手机号：</label>
<input type="text" name="mobile" maxlength="11">
<span class="error" id="mobileErr"></span>
</div>
<div class="row">
<label>验证码：</label>
<input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
<span class="error" id="captchaErr"></span>
</div>
<div class="row">
<input type="submit" value="注册">
</div>
</fieldset>
</form>
<script>
var capCode = getCaptcha(); // 生成验证码
console.log(capCode);
// 清空 input 标签后的提示信息
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
tags[i].onchange = function(){
var idname = this.name + "Err";
document.getElementById(idname).innerHTML = '';
}
}
// 显示错误消息
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 验证表单数据
function validateForm() {
// 获取表单元素的值
var name = document.querySelector("input[name='name']").value;
var pwd = document.querySelector("input[name='pwd']").value;
var email = document.querySelector("input[name='email']").value;
var mobile = document.querySelector("input[name='mobile']").value;
var captcha = document.querySelector("input[name='captcha']").value;
if(name == "" || name == null){
printError("nameErr", "用户名不能为空");
return false;
}
if(pwd == "" || pwd == null){
printError("pwdErr", "密码不能为空");
return false;
}
if(email == "" || email == null){
printError("emailErr", "邮箱不能为空");
return false;
} else {
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "请输入正确的邮箱地址");
return false;
}
}
if(mobile == "" || mobile == null){
printError("mobileErr", "手机号不能为空");
return false;
} else {
var regex = /^[1]\d{10}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "您输入的手机号码有误");
return false;
}
}
if(captcha == "" || captcha == null){
printError("captchaErr", "验证码不能为空");
return false;
} else {
console.log(capCode);
console.log(captcha);
if(capCode != captcha){
printError("captchaErr", "验证码有误");
return false;
}
}
}
// 获取验证码
function getCaptcha(){
var cap = Math.floor(Math.random()*10000).toString();
if(cap.length != 4) cap += "0";
document.getElementById("captcha").innerHTML = cap;
return capCode = cap;
}
</script>
</body>
</html>暂时记录到这里，明天继续学习。
学习文章链接： https://blog.csdn.net/m0_62617719/article/details/127564745
------------------------------------------------
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/m0_62617719/article/details/127564745