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 UI 应用不同Theme的办法
Sep 12 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
JS delegate与live浅析
2013/12/21 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python 26进制计算实现方法
2015/05/28 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
给我一面国旗 python帮你实现
2019/09/30 Python
利用Python计算KS的实例详解
2020/03/03 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
培训讲师岗位职责
2014/04/13 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
诚信教育主题班会
2015/08/13 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
js判断两个数组相等的5种方法
2022/05/06 Javascript
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis