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实现浏览器的title闪烁
Jul 08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
浅析php header 跳转
2013/06/17 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php常用数组函数实例小结
2016/12/29 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python 排列组合之itertools
2013/03/20 Python
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
windows下ipython的安装与使用详解
2016/10/20 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python实现excel转sqlite的方法
2017/07/17 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
合作投资意向书
2014/04/01 职场文书
打架检讨书范文
2015/01/27 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
贷款担保书范本
2015/09/22 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle