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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
浅谈vue权限管理实现及流程
Apr 23 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在字符断点处截断文字的实现代码
2011/04/21 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python函数的万能参数传参详解
2019/07/26 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python函数定义和调用过程详解
2020/02/09 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
经典而简洁的婚礼主持词
2014/03/13 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
个人授权委托书
2014/04/03 职场文书
学术研讨会主持词
2015/07/04 职场文书