JS 有趣的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;
                }
            }
}

(0)

相关推荐

  • AngularJS 输入验证详解及实例代码

    AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识. AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意: 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. 应用代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g

  • JavaScript实现横线提示输入验证码随输入验证码输入消失的方法

    最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,先把效果图展示出来给大家看看 效果图: 输入验证码 输入完毕 下面就把实现过程奉献给大家 第一步:编写HTML代码 <div class="main-out"> <p class="identifying-title">输入企业提供的验证码,

  • JS函数验证总结(方便js客户端输入验证)

    复制代码 代码如下: <script language="JavaScript"> var test = new Array("", "a1_", "abcdef", "abcde123", "ads23%", "aA1B2^&2"); for(var i in test) { alert(test[i] + " 的密码强度为"

  • javascript设计模式--策略模式之输入验证

    策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:

  • JS 有趣的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);     s

  • 2019手机号码JS正则表达式验证实例代码

    概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的一种过滤逻辑. 简介 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串

  • AngularJs表单验证实例代码解析

    常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

  • Struts2的输入校验实例代码

    在我们项目实际开发中在数据校验时,分为两种,一种是前端校验,一种是服务器校验:   客户端校验:主要是通过jsp写js脚本,它的优点很明显,就是输入错误的话提醒比较及时,能够减轻服务器的负担,但是客户端校验并不是安全的,简单来讲就是防君子防不了小人.    服务器端校验:最大特点就是数据安全,但是如果只有服务器端校验,会大大增加服务器端的负担. 所以一般在我们开发中,是客户端和服务器端校验相结合作用的. 那这篇文章,我只讲服务器端校验,在Struts2支持两种校验方式: 代码校验 :在服务器通过

  • BootStrap表单验证实例代码

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@

  • Ajax邮箱、用户名唯一性验证实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> $(function () { $("#txtEmail").blur(function () { $.ajax({ type: "post", url: "reg.ashx?email=" + $.trim($("#txtEmail").val()) + "&

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

随机推荐