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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JavaScript 的继承
Oct 01 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
three.js实现圆柱体
Dec 30 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
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中MD5函数使用实例代码
2008/06/07 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
php对象工厂类完整示例
2018/08/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
爱游人:Travelliker
2017/09/05 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
雏鹰争章活动总结
2014/05/09 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang