首页 / JAVASCRIPT / js番茄的表单验证类

js番茄的表单验证类

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js番茄的表单验证类，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5368字，纯文字阅读大概需要8分钟。

内容图文

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<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]$)/; 
    //错误</pre>输出信息 
    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; 
        } 
    } 
    //</pre>输出错误反馈信息 
    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> 
</head> 
<body> 
<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> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
1.".3"这样也是算浮点数的
2.this.reg和this.tip可以用
this.reg = {englisth : /^[a-zA-Z0-9_\-]+$/, chinese : /^[\u0391-\uFFE5]+$/}
这种形式，省点代码
3.日期只验证格式没有验证合法性

btw:controlName的做法不错

内容总结

以上是互联网集市为您收集整理的js番茄的表单验证类全部内容，希望文章能够帮你解决js番茄的表单验证类所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/374347.html

来源：【匿名】

【上一篇】关于树形菜单 Checkbox的全选【下一篇】javascript 怎么调用php方法

更多 ►

【js番茄的表单验证类】教程文章相关的互联网学习教程文章

javascript-表单验证【代码】【图】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单验证</title><style>*{margin: 0;padding: 0;}body{width:100%;height: 1200px;background-image: linear-gradient(to top right,rgba(224,73,13,0.4),rgba(4,149,245,0.5));}.box{width:400px;padding:40px;position:absol...

JavaScript表单验证【代码】【图】

介绍一下表单验证，不错哦：如图CSS代码@charset "gb2312"; /* CSS Document */body,dl,dt,dd,div,form {padding:0;margin:0;}#header,#main{width:650px;margin:0 auto;} .bg{background-image:url(../images/register_bg.gif);background-repeat:no-repeat;width:6px;height:6px;}.bg_top_left{background-position:0px 0px;}.bg_top_right{background-position:0px -6px;}.bg_end_left{background-position:0px -12px;}.bg_end...

JavaScript 正则表单验证（用户名、密码、确认密码、手机号、座机号、身份证号）【代码】【图】

1、关于JavaScript表单验证，如果使用双向绑定的前端js框架，会更容易的多。但是博主还是建议大家不要脱离源生js本身。因为源生js才是王道。注意：　　a、代码中的错误提示可能会没有，在代码中找到 “错误.jpg” 图片，自己制作一个　　b、验证的判断已经完成，只需要根据自己的验证规则进行表单验证，更换自己的正则表达式。　　c、博主将错误提示图片插入本文档中。需要更名为 “错误.jpg”,放到与html根目录下方可使用。　　...

javascript面向对象思想做form表单验证代码很精简哦

<html> <head> <meta charset=utf-8 />   <script src="jquery-1.7.2.min.js"></script> <script> var obj = { res : true ,nick_fun : function(o,tip){ if(this.res==true){ o.siblings("span").css("color","blue"); }else{ o.siblings("span").css("color","red"); }o.siblings("span").html(tip);}} $(function(){var regex = new RegEx...

javascript表单验证【代码】【图】

表单HTML<form action="" method="post"><fieldset class="login"><legend>Login information</legend><label for="userName" class="hover">UserName:</label><input type="text" id="userName" class="required text"/><br /><label for="password" class="hover">Password:</label><input type="text" id="password" class="required text"/><br /></fieldset><fieldset><legend>Personal Information</legend><label for="name...

JS表单验证

JS表单验证-12个常用的JS表单验证最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~1. 长度限制<p>1. 长度限制</p><form name=a onsubmit="return test()"> <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea> <br /> <input type="submit" name="Submit" value="check"> </form><script language="javascript"> function test...

史上最全JS表单验证封装类

/***************************************************************** 表单校验工具类 (linjq) *****************************************************************//** * 判断整数num是否等于0 * * @param num * @return * @author jiqinlin */function isIntEqZero(num){ return num==0;}/** * 判断整数num是否大于0 * * @param num * @return * @author jiqinlin */function isIntGtZero(num)...

JS表单验证-12个常用的JS表单验证【代码】【图】

最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~ 1. 长度限制 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 6<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7<meta name="format-detection"content="telephone=no"> 8<title>1. 长度...

js表单验证插件jQuery-Validation-Engine-master【图】

做项目基本离不开表单验证,想要美观，简洁，不占内存，用户体验效果好所以我推荐一款js表单验证因为我觉得这个挺好的，所以分享下文档下面也有下载的压缩包https://github.com/posabsolute/jQuery-Validation-Engine650) this.width=650;" src="/upload/getfiles/default/2022/11/14/20221114022705218.jpg" title="FA%R{72F3)K[WBK2(U4R4ZM.png" />昵称做了ajax验证判断输入的用户是否存在会提示先等待的信息。。。(我这里设置...

15个最佳的 JavaScript 表单验证库【图】

客户端验证在任何项目都是不够的，因为 JavaScript 可以直接忽略，人们可以提交请求到服务器。然而这并不意味着客户端验证都没必要了，很多时候我们需要在用户提交到服务器之前给予提示。JavaScript 表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。在本文中，您将找到最好的15个 JavaScript 表单验证库，可以帮助你让表单验证对用户更友好的和美观。1.ApproveJSapprovejs不会自动附加到输入变化的事件...

JavaScript表单验证

匹配中文字符的正則表達式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事。有了这个表达式就好办了匹配双字节字符(包含汉字在内)：[^x00-xff] 评注：能够用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）匹配空白行的正則表達式：ns*r 评注：能够用来删除空白行匹配HTML标记的正則表達式：< (S*?)[^>]*>.*?|< .*? /> 评注：网上流传的版本号太糟糕。上面这个也仅仅能匹配部分，对于复杂的嵌套标记依然无能为力 ...

JavaScript-Runoob：JavaScript 表单验证【代码】【图】

ylbtech-JavaScript-Runoob：JavaScript 表单验证 1.返回顶部1、JavaScript 表单验证JavaScript 表单验证JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性：验证表单数据是否为空？验证输入是否是一个正确的email地址？验证日期是否输入正确？验证表单输入内容是否为数字型？必填（或必选）项目下面的函数用来检查用户是否已填写表单中的必填（或必选...

12-01Js表单验证和JsWindow【图】

一、表单验证form1、创建一个新的表单：<form id="id是唯一的，不可重复" name=“可重复”，method="post/get",action="目标或地址，负责处理的服务端，将文本等传输到什么地方">//方法1：post提交后无长度限制，且编码后内容不可见。//方法2:get提交有长度限制，并且编码后的内容在地址栏可见（input 元素）</form>2、表单的作用：能够把网址、数据一块传输到数据库。3、动作属性：action和确认按钮当用户单击确认按钮时，表单的内...

JavaScript—— 案例：表单验证【代码】

QQ号：<input type="text" id="txtQQ"><span></span><br> 邮箱：<input type="text" id="txtEMail"><span></span><br> 手机：<input type="text" id="txtPhone"><span></span><br> 生日：<input type="text" id="txtBirthday"><span></span><br> 姓名：<input type="text" id="txtName"><span></span><br> //获取文本框 var txtQQ = document.getElementById("txtQQ"); var txtEMail = document.getElementById("txtEMail"); var t...

表单验证的完整应用案例探讨【图】

表单问题，是个纠结的问题，我觉得这个是程序开发人员要去处理的东西，但是有时候程序又要前端去处理，那要看你的后台搭档怎么样了？苦逼的前端哇，不过还是自己了解一点还是比较好，你搞我也可以搞，你不搞我还可以搞，哈哈。如果对你有用欢迎留言，共同探讨，共同进步，废话不说，贴代码（为了童鞋们方便，本代码复制即可用，无需分块拼凑）：代码如下:<!doctype html> <html> <head> <title>表单验证的完整应用</title> <sty...

首页 / JAVASCRIPT / js番茄的表单验证类

js番茄的表单验证类

内容导读

内容图文

内容总结

内容备注

内容手机端

【js番茄的表单验证类】教程文章相关的互联网学习教程文章

验证 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程