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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
微信小程序实现点击效果
Jun 21 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
深入理解node.js之path模块
2017/05/03 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
某公司部分笔试题
2013/11/05 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
初二学生评语大全
2014/12/26 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis