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字符串

JS 有趣的eval优化输入验证实例代码

  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;

  }

  }

  }