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


Posted in Javascript onSeptember 22, 2013
//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;
                }
            }
}
Javascript 相关文章推荐
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 #Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 #Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 #Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 #Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 #Javascript
js和php如何获取当前url的内容
Sep 22 #Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 #Javascript
You might like
PHP 文件上传全攻略
2010/04/28 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
项目建议书怎么写
2014/05/15 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
大学生求职自荐信
2015/03/24 职场文书
士兵突击观后感
2015/06/16 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android