文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > js教程 > 正文

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

php中文网

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

原创

1070人浏览过

相信大家看代码后再添加一些针对其他格式的验证也不是太麻烦的事情
对于各种提示效果需要修改 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的做法不错

最佳 Windows 性能的顶级免费优化软件

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

来源：php中文网

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

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

最新问题

js如何实现声纹识别语音生物特征识别技术实现 JavaScript实现声纹识别是可行的，但具有挑战性。首先利用WebAudioAPI进行音频采集；其次通过MFCC算法提取声纹特征，可借助WASM或第三方库完成；接着根据验证或识别需求选择存储特征或训练模型；最后通过距离计算或模型预测完成比对。由于浏览器端计算资源受限、高质量库缺乏及隐私问题，实际开发中需权衡性能与安全，并考虑结合云端API提升效果。

2025-06-18 09:30:02

447

js如何实现数据验证规则 4种验证方案确保表单数据准确 JS数据验证方案选择取决于项目复杂度和技术栈。1.原生JS手动验证通过if语句和正则表达式实现，灵活性高但代码量大；2.HTML5内置验证使用required、pattern等属性快速实现简单验证，但自定义程度低；3.第三方库如jQueryValidationPlugin、Validator.js提供丰富规则和易用API，简化代码但引入额外依赖；4.响应式框架如React结合Formik或Vue结合VeeValidate可实现复杂验证逻辑。HTML5验证不足在于无法自定义错误提示、实现复杂逻辑及

2025-06-18 08:12:02

867

js怎样实现页面返回确认 js页面返回确认弹窗的2种实现方式页面返回确认的实现主要有两种方式：1.利用window.onbeforeunload事件；2.使用浏览器的historyAPI。window.onbeforeunload是最简单的方法，通过返回提示信息询问用户是否离开，但不同浏览器兼容性不同，部分浏览器可能忽略自定义提示；historyAPI则通过监听popstate事件并结合pushState控制历史记录，允许更精细的控制页面离开行为。在Vue中可通过混入封装相关逻辑，在组件挂载时添加事件监听并在销毁时移除；React可使用useEffect

2025-06-18 08:03:02

439

js怎样实现长按事件移动端长按触发自定义功能实现移动端长按事件的核心方法是监听touchstart、touchmove和touchend事件，并通过setTimeout和clearTimeout控制触发时机；1.在touchstart中记录起始时间并设置定时器；2.在touchmove中判断移动距离，若超出阈值则清除定时器以避免误触；3.在touchend中判断时间差，决定触发长按或短按；优化体验可通过调整长按阈值、使用requestAnimationFrame提高精度及加入移动容错范围来减少误判；在React或Vue等框架中，可结合状态

2025-06-17 23:36:02

573

js如何实现文件下载功能前端文件下载的3种实现方法！ 1.最简单的方法是使用标签+download属性，直接设置href和download属性即可，适用于同源文件下载；2.通过window.location.href利用JavaScript触发下载，原理与第一种方法相同，但同样受限于同源策略；3.使用Blob对象和URL.createObjectURL，通过fetch获取文件数据并转为Blob对象，再创建临时URL实现下载，支持跨域、可自定义请求头及控制下载进度。针对大文件下载优化用户体验可通过监听onprogress事件显示下载进度、添加Rang

2025-06-17 23:30:02

510

js如何实现复制到剪贴板前端复制的4种实现方案分享！前端复制功能可通过四种方案实现：navigator.clipboard.writeText()异步高效但兼容性差；document.execCommand('copy')兼容性好但已过时；ClipboardAPI（polyfill）弥补兼容问题；第三方库如clipboard.js提供便捷封装。使用时需根据项目需求选择，注意安全性、内容过滤、频率限制及HTTPS保障。

2025-06-17 22:33:02

221

js如何实现人脸检测基于TensorFlow.js的人脸检测人脸检测是使用JavaScript在浏览器中识别图像或视频中人脸的技术，借助TensorFlow.js可在客户端运行模型实现此功能。1.可选择face-api.js或TensorFlowHub上的预训练模型进行检测；2.模型选择需权衡精度与速度，如tinyFaceDetector适合移动端实时检测；3.检测结果包含人脸框坐标和置信度，可用于绘制人脸框或后续分析；4.性能优化可通过轻量模型、降低分辨率、WebWorkers、代码优化及GPU加速实现；5.常见问题如光照、遮挡等可通过数据增强、复杂模

2025-06-17 22:12:02

152

js如何实现简单的数据缓存前端数据缓存的5种实现方案！前端数据缓存的核心在于利用浏览器存储机制提升性能与体验，常见方案包括：1.LocalStorage/SessionStorage：前者持久存储，后者仅在会话期间有效；2.Cookies：适合少量数据，安全性需注意；3.IndexedDB：适合大量结构化数据，API较复杂；4.ServiceWorkerCacheAPI：支持离线访问；5.MemoryCache：临时缓存，页面刷新即失效。选择策略应综合考虑数据量、类型、缓存时间、安全性及复杂性等因素。

2025-06-17 21:06:02

802

js如何检测网络连接状态判断网络质量的4种检测方法！ JS检测网络连接状态和质量的核心方法包括：1.使用navigator.onLine判断是否在线，但其准确性有限；2.通过请求小图片或API接口判断网络是否连通；3.使用fetchAPI发起请求并判断响应状态；4.通过测量响应时间评估网络质量。具体而言，navigator.onLine仅能作为辅助手段，实际更推荐通过Image对象或fetchAPI发起网络请求，若请求成功则说明网络连通，否则可能断开；同时，可记录请求开始和结束时间计算响应时间，从而评估网络质量，响应时间越短质量越高；此外，虽然浏览

2025-06-17 20:15:02

307

js如何实现多语言切换前端国际化i18n解决方案实现前端多语言切换的核心在于根据用户语言偏好动态加载对应语言包并替换页面内容。具体步骤如下：1.通过URL参数、Cookie或浏览器语言确定用户首选语言，优先级为URL参数＞Cookie＞浏览器语言；2.将不同语言文本存储在独立JSON文件中，并通过fetch或import方式异步加载；3.使用DOM操作、模板引擎或框架指令（如Vue自定义指令）替换页面文本；4.提供语言切换界面，在用户选择后更新Cookie或URL参数并重新加载语言包；5.对于动态加载内容，可通过MutationObserve

2025-06-17 20:00:02

471

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

ThinkPHP5快速开发企业站点[全程实录]

399679次学习
收藏
PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

51377次学习
收藏
Thinkphp3.2.3个人博客开发

212765次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部