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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue+element实现打印页面功能
May 20 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
如何管理Vue中的缓存页面
Feb 06 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基础学习之流程控制的实现分析
2013/04/28 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
关于Jquery中的事件绑定总结
2016/10/26 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
python字符类型的一些方法小结
2016/05/16 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
护士求职简历自我评价
2015/03/10 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
详解OpenCV曝光融合
2022/04/29 Python