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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js动态切换图片的方法
Jan 20 Javascript
JavaScript的==运算详解
Jul 20 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
vue实现全选和反选功能
Aug 31 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 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
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
Python使用一行代码获取上个月是几月
2018/08/30 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python执行时间的几种计算方法
2020/07/31 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
如何利用python 读取配置文件
2021/01/06 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
大专毕业生自我评价分享
2013/11/10 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python