番茄的表单验证类代码修改版


Posted in Javascript onJuly 18, 2008

在经典论坛上发过一次,个人的项目中在后台处理时用到这个东西,对于简单的表单验证还是挺方便的。
因为不想让代码变得太臃肿,所以有很多不常用的功能就没有再添加了
对于我佛山人的意见就没有做修改了,为什么?因为我懒呗,哈哈
今天看到omeweb也修改了一个版本,做了许多修改,改得挺不错的,谢谢了。

源码在这里: 

//去除字符串两边的空格
String.prototype.trim = function () {
    return this.replace(/(^\s+)|(\s+$)/g, "");
}
//检测字符串是否为空
String.prototype.isEmpty = function () {
    return !(/.?[^\s ]+/.test(this));
}
//检测值是否介于某两个指定的值之间
String.prototype.isBetween = function (val, min, max) {
    return isNaN(val) == false && val >= min && val <= max;
}
//获取最大值或最小值
String.prototype.getBetweenVal = function (what) {
    var val = this.split(',');
    var min = val[0];
    var max = val[1] == null ? val[0] : val[1];
    if (parseInt(min) > parseInt(max)) {
        min = max;
        max = val[0];
    }
    return what == 'min' ? (isNaN(min) ? null : min) : (isNaN(max) ? null : max);
}
var validator = function (formObj) {
    this.allTags = formObj.getElementsByTagName('*');
    //字符串验证正则表达式
    this.reg = new Object();
    this.reg.english = /^[a-zA-Z0-9_\-]+$/;
    this.reg.chinese = /^[\u0391-\uFFE5]+$/;
    this.reg.number = /^[-\+]?\d+(\.\d+)?$/;
    this.reg.integer = /^[-\+]?\d+$/;
    this.reg.float = /^[-\+]?\d+(\.\d+)?$/;
    this.reg.date = /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
    this.reg.email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    this.reg.url = /^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]
\':+!]*([^<>\"\"])*$/;
    this.reg.phone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d
{1,4})?$/;
    this.reg.mobile = /^((\(\d{2,3}\))|(\d{3}\-))?((13\d{9})|(159\d{8}))$/;
    this.reg.ip = /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]
\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-
5])$/;
    this.reg.zipcode = /^[1-9]\d{5}$/;
    this.reg.qq = /^[1-9]\d{4,10}$/;
    this.reg.msn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    this.reg.idcard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
    //错误输出信息
    this.tip = new Object();
    this.tip.unknow = '未找到的验证类型,无法执行验证。';
    this.tip.paramError = '参数设置错误,无法执行验证。';
    this.tip.required = '不允许为空。';
    this.tip.english = '仅允许英文字符及下划线 (a-zA-Z0-9_)。';
    this.tip.chinese = '仅允许中文字符。';
    this.tip.number = '不是一个有效的数字。';
    this.tip.integer = '不是一个有效的整数。';
    this.tip.float = '不是一个有效的浮点数。';
    this.tip.date = '不是一个有效的日期格式。 (例如:2007-06-29)';
    this.tip.email = '不是一个有效的电子邮件格式。';
    this.tip.url = '不是一个有效的超链接格式。';
    this.tip.phone = '不是一个有效的电话号码。';
    this.tip.mobile = '不是一个有效的手机号码。';
    this.tip.ip = '不是一个有效的IP地址。';
    this.tip.zipcode = '不是一个有效的邮政编码。';
    this.tip.qq = '不是一个有效的QQ号码。';
    this.tip.msn = '不是一个有效的MSN帐户。';
    this.tip.idcard = '不是一个有效的身份证号码。';
    //获取控件名称
    this.getControlName = function ()
    {
        return this.element.getAttribute('controlName') == null
               ? '指定控件的值'
               : this.element.getAttribute('controlName');
    }
    //设定焦点
    this.setFocus = function (ele) {
        try {
            ele.focus();
        } catch (e){}
    }
    //设置边框颜色
    this.setBorderColor = function (ele) {
        var borderColor = ele.currentStyle ?
                          ele.currentStyle.borderColor :
                          document.defaultView.getComputedStyle(ele, null)['borderColor'];
        ele.style.borderColor = '#ff9900';
        ele.onkeyup = function () {
            this.style.borderColor = borderColor;
        }
    }
    //输出错误反馈信息
    this.feedback = function (type) {
        try {
            var msg = eval('this.tip.' + type) == undefined ?
                      type :
                      this.getControlName() + eval('this.tip.' + type);
        } catch (e) {
            msg = type;
        }
        this.setBorderColor(this.element);
        alert(msg);
        this.setFocus(this.element);
    };
    //执行字符串验证
    this.validate = function () {
        var v = this.element.value;
        //验证是否允许非空
        var required = this.element.getAttribute('required');
        if (required != null && v.isEmpty()) {
            this.feedback('required');
            return false;
        }
        //验证是否合法格式
        var dataType = this.element.getAttribute('dataType');
        if (!v.isEmpty() && dataType != null &&  dataType.toLowerCase() != 'password') {
            dataType = dataType.toLowerCase();
            try {
                if (!(eval('this.reg.' + dataType)).test(v)) {
                    this.feedback(dataType);
                    return false;
                }
            } catch(e) {
                this.feedback('unknow');
                return false;
            }
        }
        //执行数据验证
        var confirm = this.element.getAttribute('confirm');
        if (confirm != null) {
            try {
                var data = eval('formObj.' + confirm + '.value');
                if (v != data) {
                    alert('两次输入的内容不一致,请重新输入。');
                    this.setBorderColor(this.element);
                    this.setFocus(this.element);
                    return false;
                }
            } catch (e) {
                this.feedback('paramError');
                return false;
            }
        }
        //验证数字大小
        var dataBetween = this.element.getAttribute('dataBetween');
        if (!v.isEmpty() && dataBetween != null) {
            var min = dataBetween.getBetweenVal('min');
            var max = dataBetween.getBetweenVal('max');
            if (min == null || max == null) {
                this.feedback('paramError');
                return false;
            }
            if (!v.isBetween(v.trim(), min, max)) {
                this.feedback(this.getControlName() + '必须是介于 ' + min + '-' + max + ' 之
间的数字。');
                return false;
            }
        }
        //验证字符长度
        var dataLength = this.element.getAttribute('dataLength');
        if (!v.isEmpty() && dataLength != null) {
            var min = dataLength.getBetweenVal('min');
            var max = dataLength.getBetweenVal('max');
            if (min == null || max == null) {
                this.feedback('paramError');
                return false;
            }
            if (!v.isBetween(v.trim().length, min, max)) {
                this.feedback(this.getControlName() + '必须是 ' + min + '-' + max + ' 个字符
。');
                return false;
            }
        }
        return true;
    };
    //执行初始化操作
    this.init = function () {
        for (var i=0; i<this.allTags.length; i++) {
            if (this.allTags[i].tagName.toUpperCase() == 'INPUT' ||
                this.allTags[i].tagName.toUpperCase() == 'SELECT' ||
                this.allTags[i].tagName.toUpperCase() == 'TEXTAREA')
            {
                this.element = allTags[i];
                if (!this.validate())
                    return false;
            }
        }
    };
    return this.init();
}

Javascript 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
js 居中漂浮广告
Mar 21 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 #Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 #Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 #Javascript
点图片上一页下一页翻页效果
Jul 09 #Javascript
JS的数组的扩展实例代码
Jul 09 #Javascript
JS location几个方法小姐
Jul 09 #Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 #Javascript
You might like
文件上传类
2006/10/09 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python面向对象类的继承实例详解
2018/06/27 Python
django+mysql的使用示例
2018/11/23 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
副总经理工作职责
2013/11/28 职场文书
员工评语大全
2014/01/19 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
南极大冒险观后感
2015/06/05 职场文书
一年级语文教学随笔
2015/08/14 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
分享几种python 变量合并方法
2022/03/20 Python
golang操作rocketmq的示例代码
2022/04/06 Golang