JavaScript 错误处理、调试、表单验证

JavaScript 错误处理(Throw、Try 和 Catch)

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:

可能是语法错误,通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然,也可能是由于许多其他不可预知的因素。

JavaScript 抛出(throw)错误

当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。

描述这种情况的技术术语是:JavaScript 将抛出一个错误。

JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

 try{
   //在这里运行代码
}catch(err){
   //在这里处理错误
}

在下面的例子中,我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误,并执行代码来处理它。

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var txt = "";

			function message() {
				try {
					adddlert("Welcome guest!");
				} catch (err) {
					txt = "本页有一个错误。\n\n";
					txt += "错误描述:" + err.message + "\n\n";
					txt += "点击确定继续。\n\n";
					alert(txt);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="查看消息" onclick="message()">
	</body>
</html>

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是:创建或抛出异常(exception)。

如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

语法

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			function myFunction() {
				try {
					var x = document.getElementById("demo").value;
					if (x == "") throw "empty";
					if (isNaN(x)) throw "not a number";
					if (x > 10) throw "too high";
					if (x < 5) throw "too low";
				} catch (err) {
					var y = document.getElementById("mess");
					y.innerHTML = "Error: " + err + ".";
				}
			}
		</script>
		<h1>My First JavaScript</h1>
		<p>Please input a number between 5 and 10:</p>
		<input id="demo" type="text">
		<button type="button" onclick="myFunction()">Test Input</button>
		<p id="mess"></p>
	</head>
	<body>
		<input type="button" value="查看消息" onclick="message()">
	</body>
</html>

注意:如果 getElementById 函数出错,上面的例子也会抛出一个错误。

JavaScript 调试

JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。

通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难,但幸运的是,很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

有了调试工具,我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

console.log() 方法

如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值。

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

设置断点

在调试窗口中,你可以设置 JavaScript 代码的断点。

在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。

在检查完毕后,可以重新执行代码(如播放按钮)。

debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用,debugger 语句将无法工作。

开启 debugger ,代码在第三行前停止执行。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性:

  • 验证表单数据是否为空?
  • 验证输入是否是一个正确的email地址?
  • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validateForm() {        
    var x=document.forms["myForm"]["fname"].value;        
    if (x==null || x==""){        
        alert("First name must be filled out");        
        return false;        
    }        
}

以上函数在 form 表单提交时被调用:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

function validateForm(){        
var x=document.forms["myForm"]["email"].value;        
var atpos=x.indexOf("@");        
var dotpos=x.lastIndexOf(".");        
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){        
  alert("Not a valid e-mail address");        
  return false;        
  }       
}
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

数字验证

下面的函数检查输入的数据是否是1~10之间的数字。假如输入的不为数字或不是,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 

<strong>请输入1到10之间的数字:</strong>

<input id="number">

<button type="button" onclick="myFunction()">提交</button>

</form>

猜你喜欢

转载自blog.csdn.net/qq_60271706/article/details/133203435
今日推荐