社区学习工具库休闲

简体中文

首页 > web前端 > js教程 > js番茄的表单验证类_表单特效

js番茄的表单验证类_表单特效

WBOY

发布： 2016-05-16 19:02:54

原创

1001 人浏览过

相信大家看代码后再添加一些针对其他格式的验证也不是太麻烦的事情
对于各种提示效果需要修改 feedback 方法就可以实现，因为不想让代码变得太臃肿，所以有很多不常用的功能就没有再添加了
主要目的提供大家参考与分享，也希望能够根据大家的意见使其变得更加完善

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>番茄的表单验证类_脚本之家</title> 
<script language="javascript" type="text/javascript"> 
//去除字符串两边的空格 
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(); 
} 
</script> 
 
 
<form id="form1" name="form1" method="post" action="" onsubmit="return validator(this);"> 
  <table width="600" border="0" cellspacing="0" cellpadding="2" style="font:12px Tahoma"> 
    <tr> 
      <td>密码</td> 
      <td>password</td> 
      <td><input type="text" name="password" controlname="密码" datatype="password"></td> 
    </tr> 
    <tr> 
      <td>密码确认</td> 
      <td>confirm</td> 
      <td><input type="text" name="confirm" controlname="密码确认" confirm="password"></td> 
    </tr> 
    <tr> 
      <td width="57">英文</td> 
      <td width="60">english</td> 
      <td width="471">
<input type="text" name="english" controlname="英文" datatype="english" datalength="4,10"> 
      4~10个字符</td> 
    </tr> 
    <tr> 
      <td>中文</td> 
      <td>chinese</td> 
      <td>
<input type="text" name="chinese" required="required" controlname="中文"> 
非空</td> 
    </tr> 
    <tr> 
      <td>数字</td> 
      <td>number</td> 
      <td>
<input type="text" name="number" controlname="数字" databetween="10,100"> 
      大于10，小于100</td> 
    </tr> 
    <tr> 
      <td>整数</td> 
      <td>integer</td> 
      <td><input type="text" name="integer" controlname="整数" datatype="integer"></td> 
    </tr> 
    <tr> 
      <td>浮点数</td> 
      <td>float</td> 
      <td><input type="text" name="float" controlname="浮点数" datatype="float"></td> 
    </tr> 
    <tr> 
      <td>日期</td> 
      <td>date</td> 
      <td><input type="text" name="date" controlname="日期" datatype="date"></td> 
    </tr> 
    <tr> 
      <td>邮件</td> 
      <td>email</td> 
      <td><input type="text" name="email" controlname="邮件" datatype="email"></td> 
    </tr> 
    <tr> 
      <td>网址</td> 
      <td>url</td> 
      <td><input type="text" name="url" controlname="网址" datatype="url"></td> 
    </tr> 
    <tr> 
      <td>电话</td> 
      <td>phone</td> 
      <td><input type="text" name="phone" controlname="电话" datatype="phone"></td> 
    </tr> 
    <tr> 
      <td>手机</td> 
      <td>mobile</td> 
      <td><input type="text" name="mobile" controlname="手机" datatype="mobile"></td> 
    </tr> 
    <tr> 
      <td>IP地址</td> 
      <td>ip</td> 
      <td><input type="text" name="ip" controlname="IP地址" datatype="ip"></td> 
    </tr> 
    <tr> 
      <td>邮编</td> 
      <td>zipcode</td> 
      <td><input type="text" name="zipcode" controlname="邮编" datatype="zipcode"></td> 
    </tr> 
    <tr> 
      <td>QQ号码</td> 
      <td>qq</td> 
      <td><input type="text" name="qq" controlname="QQ号码" datatype="ip"></td> 
    </tr> 
    <tr> 
      <td>MSN</td> 
      <td>msn</td> 
      <td><input type="text" name="msn" controlname="MSN" datatype="msn"></td> 
    </tr> 
    <tr> 
      <td>身份证</td> 
      <td>idcard</td> 
      <td><input type="text" name="idcard" controlname="身份证" datatype="idcard"></td> 
    </tr> 
    <tr> 
      <td colspan="3" align="left"><input type="submit" name="Submit" value=" 提交 "></td> 
    </tr> 
  </table> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

1.".3"这样也是算浮点数的
2.this.reg和this.tip可以用
this.reg = {englisth : /^[a-zA-Z0-9_\-]+$/, chinese : /^[\u0391-\uFFE5]+$/}
这种形式，省点代码
3.日期只验证格式没有验证合法性

btw:controlName的做法不错

相关标签：

js 表单验证

来源：php.cn

上一篇：番茄的表单验证类代码修改版_表单特效下一篇：JS location几个方法小姐_javascript技巧

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

在多个路由中声明的workerpool是否仍然可以保持其cpu使用率而不关心阈值我希望找到一个带有workerpool的node.js系统来处理CPU密集型任务，但是对于多条路由中的cpu使用情况，我有些困惑。一个场景是这样的：route1.js:constw...

来自于 2024-04-06 19:54:23

0

1

444

放大 d3.js 时散点图点不会保持值这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...

来自于 2024-04-06 18:16:26

0

1

403

显示隐藏的侧面板：选中我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...

来自于 2024-04-06 15:49:33

0

1

319

我们是否应该使用 SSG 来部署使用 Nuxt.js 创建的仪表板？我们将使用Nuxt.js开发一个供内部使用的仪表板。由于这将是一个内部仪表板，因此不需要通用模式。一般大部分仪表板都是在SPA中开发的。但是SPA还需要服务器将初始HTML和js包...

来自于 2024-04-06 13:17:44

0

1

493

Electron 在预加载时获取 AppData 如何获取预加载的AppData目录？背景.js[...]asyncfunctioncreateWindow(){constwin=newBrowserWindow({width:8...

来自于 2024-04-06 11:05:31

0

1

417

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1424291
php入门教程之一周学会PHP

4270556
JAVA 初级入门视频教程

2547941
小甲鱼零基础入门学习Python视频教程

507862
PHP 零基础入门教程

863587

最新下载

更多>

网站特效

网站源码

网站素材

前端模板