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获取单选按钮的数据
Nov 27 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
vue实现页面切换滑动效果
Jun 29 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP 图片水印类代码
2012/08/27 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP session 会话处理函数
2016/06/06 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
如何基于python生成list的所有的子集
2019/11/11 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
数据库方面面试题
2012/04/22 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
写好自荐信的要点
2013/11/06 职场文书
自主招生自荐信范文
2013/12/04 职场文书
大学生村官承诺书
2014/03/28 职场文书
护理学专业求职信
2014/06/29 职场文书
运动会新闻报道稿
2015/07/22 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript