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


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 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
Vue面试题及Vue知识点整理
Oct 07 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
php foreach、while性能比较
2009/10/15 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
pandas参数设置的实用小技巧
2020/08/23 Python
学习Python需要哪些工具
2020/09/04 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
光声世纪笔试题目
2012/08/25 面试题
后勤自我鉴定
2013/10/13 职场文书
个人简历自我评价范文
2014/02/04 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Python中super().__init__()测试以及理解
2021/12/06 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS