本文通过具体实例展示如何利用JavaScript中的eval函数简化表单验证逻辑。文章首先介绍eval的基本用法，随后对比传统if判断与基于eval的动态验证方式，最后通过封装对象实现更优雅的输入校验方案，帮助开发者提升代码可读性与维护性。
eval 基本用法示例
代码如下：
// eval 用于计算字符串中包含的 JavaScript 代码值
// 1、
var str1 = '12+3';
eval(str1); // 结果为 15
// 2、
var str2 = '[1,2,3]';
eval(str2[0]); // 结果为 1
// 3、
eval('alert("abc")'); // 弹出提示框 abc
// 4、
var str = "function show(){alert('love you');}";
eval(str);
show();
// 5、eval 可用于解析 JSON 字符串
传统表单验证的局限性
1、针对上述用户名和邮箱的空值验证，传统做法如下
代码如下：
var flag = true;
if (document.getElementById("txtName").value == "") {
// 写入错误信息
flag = false;
}
if (document.getElementById("txtEmail").value == "") {
// 写入错误信息
flag = false;
}
return flag
}--> 但如果需要验证的字段很多，使用 if 语句会非常繁琐且不美观
HTML 结构与 eval 应用
2、接下来查看 HTML 结构
代码如下：
用户名：<input type="text" id="txtName" name="name" /><br />
邮箱：<input type="text" id="txtEmail" name="email" value="" /><br />
<input type="button" value="验证" onclick="validateForm()" />2.1 观察以下代码
代码如下：
function validateForm() {
var nameV = form1.name.value();
alert(nameV); // 如果我们在文本框输入"短发美女"，弹出来肯定是"短发美女"
// 继续
nameV = eval('form1.name.value()');
alert(nameV); // 结果同样是 "短发美女" 5 }封装验证逻辑
3、进行代码封装
代码如下：
function FormField(fieldName, fieldDesc) { // 将变化者 属性字段和描述封装起来
this.fieldName = fieldName;
this.fieldDesc = fieldDesc;
}
String.prototype.MyTrim = function () { // 去除首尾空格
return this.replace(/^\s+|\s+$/g, '');
}
function validateForm() {
var oUl = document.getElementById("ulError");
oUl.innerHTML = "";
var list = new Array
(
// 以后只需要验证为空的 只需要在数组中增加一个对象即可
new FormField("name", "用户名"),
new FormField("email", "邮箱")
);
var flag = true;
for (var i = 0; i < list.length; i++) {
var fv = eval("form1." + list[i].fieldName + ".value"); // 执行 eval 运算
if (fv == null || !fv.MyTrim()) {
// 记录错误信息
// var liError = "<li>" + list[i].fieldDesc + "不能为空</li>";
// oUl.innerHTML += liError;
var liError = document.createElement("li");
liError.innerHTML = list[i].fieldDesc + "不能为空";
oUl.appendChild(liError);
flag = false;
}
}
}