JS 有趣的eval优化输入验证实例代码

 更新时间:2013年09月22日 16:07:12   作者:  
这篇文章介绍了eval优化输入验证实例代码,有需要的朋友可以参考一下

复制代码 代码如下:

//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字符串

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;
                }
            }
}

相关文章

  • 值得分享的Bootstrap Table使用教程

    值得分享的Bootstrap Table使用教程

    一套值得分享和大家收藏的Bootstrap学习教程,完整的知识体系,系统的学习资料,帮助大家开启Bootstrap Table学习之旅,享受学习的乐趣
    2016-11-11
  • 异步JS框架的作用以及实现方法

    异步JS框架的作用以及实现方法

    这篇文章主要介绍了异步JS框架的作用以及使用方法
    2015-10-10
  • JavaScript实现简易聊天对话框(加滚动条)

    JavaScript实现简易聊天对话框(加滚动条)

    这篇文章主要为大家详细介绍了JavaScript实现简易聊天对话框,附加滚动条功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 小程序角标的添加及绑定购物车数量进行实时更新的实现代码

    小程序角标的添加及绑定购物车数量进行实时更新的实现代码

    这篇文章主要介绍了小程序角标的添加及绑定购物车数量进行实时更新的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • JS导出PDF插件的方法(支持中文、图片使用路径)

    JS导出PDF插件的方法(支持中文、图片使用路径)

    下面小编就为大家带来一篇JS导出PDF插件的方法(支持中文、图片使用路径)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Script的加载方法小结

    Script的加载方法小结

    对动态加载脚本,需要重点关注的一个问题是,所动态加载的JS脚本的接口依赖问题。
    2011-01-01
  • 使用Vue3实现一个Upload组件的示例代码

    使用Vue3实现一个Upload组件的示例代码

    这篇文章主要介绍了使用Vue3实现一个Upload组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 微信小程序中的轮播图实现示例

    微信小程序中的轮播图实现示例

    打开一个小程序,我们会发现,一般构图排版都是图片banner - 快捷按钮 - 产品/文章列表等详细信息,底部导航一般是2~5个。这样的排版是比较美观的,那么为什么要这样设计,这些轮播图、快捷按钮等小程序组件都有什么用呢?接下来就带你详细了解下
    2022-12-12
  • 微信小程序Vant组件库的安装与使用教程

    微信小程序Vant组件库的安装与使用教程

    之前推荐过的移动端web组件库 Vant是Vue.js版本的,其对内承载了有赞所有核心业务,对外有十多万开发者在使用,一直是业界主流的移动端组件库之一,下面这篇文章主要给大家介绍了关于微信小程序Vant组件库的安装与使用的相关资料,需要的朋友可以参考下
    2022-09-09
  • JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法
    2013-04-04

最新评论