JS try catch+表单验证+-CFANZ编程社区

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

------------------------------------------------

原文链接：https://blog.csdn.net/m0_62617719/article/details/127564745