JS 有趣的eval优化输入验证

最新推荐文章于 2025-03-01 15:54:14 发布

转载最新推荐文章于 2025-03-01 15:54:14 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zjflove/p/3333163.html

本文介绍如何利用eval函数简化HTML表单验证过程，通过将验证逻辑封装为对象，实现代码复用和提高可读性。具体展示了如何将多个验证字段整合到一个函数中，避免冗余的if语句，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 //eval就是计算字符串【可以放任何js代码】里的值
 2 1、  var str1='12+3'; 
 3        eval(str1);//15
 4 
 5 2、 var str2='[1,2,3]';
 6        eval(str2[0]);//1
 7 
 8 3、eval('alert("abc")');//弹出abc
 9 
10 4、var str="function show(){alert('love you');}";
11      eval(str);
12      show();
13 
14 5、eval--->json字符串

1、如果对如上用户名，邮箱验证输入验空，传统的做法

    var flag = true;
            if (document.getElementById("txtName").value == "") {
                //写入错误信息
                flag = false;
            }
            if (document.getElementById("txtEmail").value == "") {
                //写入错误信息
                flag = false;
            }
            return flag
        }

-->但是如何有很多需要验证的字段，if会有很多，而且一点都不雅观

2、平静心情，来看看html

1   用户名：<input type="text" id="txtName" name="name" /><br /> 
2   邮箱:<input type="text" id="txtEmail" name="email" value="" /><br />
3    <input type="button" value="验证" onclick="validateForm()" />

2.1 看如下代码

1  function validateForm() {
2 
3             var nameV = form1.name.value()
4             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;
                }
            }
}

转载于:https://www.cnblogs.com/zjflove/p/3333163.html