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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JS location几个方法小姐
Jul 09 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
javascript页面倒计时实例
Jul 25 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
javascript中this关键字详解
2016/12/12 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
秋天的怀念教学反思
2014/04/28 职场文书
我的小天地教学反思
2014/04/30 职场文书
会计专业自荐信
2014/06/03 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers