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 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
python类定义的讲解
2013/11/01 Python
python支持断点续传的多线程下载示例
2014/01/16 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
什么是接口(Interface)?
2013/02/01 面试题
建筑工程技术应届生求职信
2013/11/17 职场文书
门卫岗位安全职责
2013/12/13 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
留学推荐信怎么写
2014/01/25 职场文书
股东出资证明书范例
2014/10/04 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
少先队工作总结2015
2015/05/13 职场文书
力克胡哲观后感
2015/06/10 职场文书
教师节座谈会主持词
2015/07/03 职场文书
python计算列表元素与乘积详情
2022/08/05 Python