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


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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python操作mysql代码总结
2018/06/01 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python统计字符的个数代码实例
2020/02/07 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
浅析Python面向对象编程
2020/07/10 Python
python爬取youtube视频的示例代码
2021/03/03 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
成教自我鉴定
2013/10/27 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
小学六一主持词开场白
2015/05/28 职场文书