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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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
PHP中路径问题的解决方案
2006/10/09 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
python之wxPython菜单使用详解
2014/09/28 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
使用python实现接口的方法
2017/07/07 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
党委书记岗位职责
2013/11/24 职场文书
整改报告怎么写
2014/11/06 职场文书
求职自我评价范文
2015/03/09 职场文书
运动会观后感
2015/06/09 职场文书
感谢师恩主题班会
2015/08/17 职场文书
Python中相见恨晚的技巧
2021/04/13 Python