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


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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
神奇的代码 通杀各种网站-可随意修改复制页面内容
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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python操作excel的方法
2018/08/16 Python
python中的句柄操作的方法示例
2019/06/20 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
物流专业求职计划书
2014/01/10 职场文书
简短大学毕业感言
2014/01/18 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
纪录片信仰观后感
2015/06/08 职场文书
大学副班长竞选稿
2015/11/21 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Python中异常处理用法
2021/11/27 Python