JS 有趣的eval最佳化輸入驗證執行個體代碼

複製代碼 代碼如下:
//eval就是計算字串【可以放任何js代碼】裡的值
//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會有很多，而且一點都不雅觀

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;
                }
            }
}