首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

简单的js表单验证函数

Posted in Javascript onOctober 28, 2013

网站制作中，表单验证的功能是很常用的。
有些时候，用一些成型的js控件会比较方便，但是又过于庞大和难以维护（本人的js水平不高）
所以干脆自己写了一个。至于好不好，灵活不灵活，还请大家指点（先上图，很难看，请不要介意）：
简单的js表单验证函数

代码：

表单验证js代码
var fv =
{
    lang: "zh-cn",  //错误提示语言
    inValidedStr: "=",  //初始随意复制，使其长度不为0
    mail: function(elementID)   //验证邮件地址合法,elementID为input文本输入框的ID
    {
        if (elementID == null) { return true; }
        else
        {
            var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            if (reg.test(document.getElementById(elementID).value))
            {
                fv.inValidedStr = fv.inValidedStr.replace(/mail/g, "");
                fv.inValidedStr = fv.inValidedStr.replace("=", "");
                validMsg(fv.lang, "mail", "mailInfo");
            }
            else
            {
                fv.inValidedStr = fv.inValidedStr + "mail";
                errorMsg(fv.lang, "mail", "mailInfo");
            }
        }
    },
    username: function(elementID)   //验证用户名合法 字母数字下划线，长度为6-20
    {
        if (elementID == null) { return true; }
        else
        {
            var reg = /^[a-zA-Z0-9_]{5,19}$/;
            if (reg.test(document.getElementById(elementID).value))
            {
                fv.inValidedStr = fv.inValidedStr.replace(/username/g, "");
                fv.inValidedStr = fv.inValidedStr.replace("=", "");
                validMsg(fv.lang, "username", "usernameInfo");
            }
            else
            {
                fv.inValidedStr = fv.inValidedStr + "username";
                errorMsg(fv.lang, "username", "usernameInfo");
            }
        }
    },
    //....可以加其他验证
    isValid: function() { return (fv.inValidedStr.length == 0); }
};
//验证成功时的信息 elementID 为信息提示的html单元的id
function validMsg(lang, valueType, elementID)
{
    var msgInfo = "";
    var isCn = lang == "zh-cn";
    switch (valueType)
    {
        case "mail":
            msgInfo = isCn ? " √ 地址正确" : " √ the mail address is valided";
            break;
        case "username":
            msgInfo = isCn ? " √ 成功" : " √ The account valided ";
            break;
        case "password":
            msgInfo = isCn ? " √ 成功" : " √ Valided format!";
            break;
        //.....对应增加其他情况
        default:
            break;
    }
    document.getElementById(elementID).innerHTML = msgInfo;
    document.getElementById(elementID).style.color = "green";
}
//验证失败时的信息
function errorMsg(lang, valueType, elementID)
{
    var msgInfo = "";
    var isCn = lang == "zh-cn";
    switch (valueType)
    {
        case "mail":
            msgInfo = isCn ? " × 请输入正确的邮件地址" : " × The e-mail format is error,plz input right format .eg. abc@def.com.";
            break;
        case "username":
            msgInfo = isCn ? " × 长度6-20个字符，只能为数字，字母，下划线组成" : " × The account just ";
            break;
        case "password":
            msgInfo = isCn ? " × 密码为……" : " × inValided format!";
            break;
        //....对应增加其他情况 
        default:
            break;
    }
        document.getElementById(elementID).innerHTML = msgInfo;
        document.getElementById(elementID).style.color = "red";
}

前台代码（aspx页面）：
前台aspx页面代码
<!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 runat="server">
    <title></title>
    <script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">fv.lang = "en"/*如去掉此行，则默认为中文提示*/</script>
        <input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
        <asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
        <input type="submit" onclick="return fv.isValid()" value="Submit" />
    </div>
    </form>
</body>
</html>

然后，如果需要其他的验证，则加入即可。相关正则表达式

匹配中文字符的正则表达式： [u4e00-u9fa5] 
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 
匹配双字节字符(包括汉字在内)：[^x00-xff] 
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） 
匹配空白行的正则表达式：ns*r 
评注：可以用来删除空白行 
匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? /> 
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力 
匹配首尾空白字符的正则表达式：^s*|s*$ 
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式 
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 
评注：表单验证时很实用 
匹配网址URL的正则表达式：[a-zA-z]+://[^s]* 
评注：网上流传的版本功能很有限，上面这个基本可以满足需求 
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 
评注：表单验证时很实用 
匹配国内电话号码：d{3}-d{8}|d{4}-d{7} 
评注：匹配形式如 0511-4405222 或 021-87888822 
匹配腾讯QQ号：[1-9][0-9]{4,} 
评注：腾讯QQ号从10000开始 
匹配中国邮政编码：[1-9]d{5}(?!d) 
评注：中国邮政编码为6位数字 
匹配身份证：d{15}|d{18} 
评注：中国的身份证为15位或18位 
匹配ip地址：d+.d+.d+.d+ 
评注：提取ip地址时有用 
匹配特定数字： 
^[1-9]d*$　 　 //匹配正整数 
^-[1-9]d*$ 　 //匹配负整数 
^-?[1-9]d*$
 //匹配整数 
^[1-9]d*|0$　 //匹配非负整数（正整数 + 0） 
^-[1-9]d*|0$
 //匹配非正整数（负整数 + 0） 
^[1-9]d*.d*|0.d*[1-9]d*$
 //匹配正浮点数 
^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数 
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数 
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$
 //匹配非负浮点数（正浮点数 + 0） 
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$
//匹配非正浮点数（负浮点数 + 0） 
评注：处理大量数据时有用，具体应用时注意修正 
匹配特定字符串： 
^[A-Za-z]+$
//匹配由26个英文字母组成的字符串 
^[A-Z]+$
//匹配由26个英文字母的大写组成的字符串 
^[a-z]+$
//匹配由26个英文字母的小写组成的字符串 
^[A-Za-z0-9]+$
//匹配由数字和26个英文字母组成的字符串 
^w+$
//匹配由数字、26个英文字母或者下划线组成的字符串 
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下: 
只能输入数字：“^[0-9]*$” 
只能输入n位的数字：“^d{n}$” 
只能输入至少n位数字：“^d{n,}$” 
只能输入m-n位的数字：“^d{m,n}$” 
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$” 
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$” 
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$” 
只能输入非零的正整数：“^+?[1-9][0-9]*$” 
只能输入非零的负整数：“^-[1-9][0-9]*$” 
只能输入长度为3的字符：“^.{3}$” 
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$” 
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$” 
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$” 
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$” 
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$” 
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间， 
只能包含字符、数字和下划线。 
验证是否含有^%&',;=?前台aspx页面代码<!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 runat="server">
    <title></title>
    <script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">fv.lang = "en"/*如去掉此行，则默认为中文提示*/</script>
        <input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
        <asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
        <input type="submit" onclick="return fv.isValid()" value="Submit" />
    </div>
    </form>
</body>
</html>

XXquot;等字符：“[^%&',;=?$x22]+” 
只能输入汉字：“^[u4e00-u9fa5],{0,}$” 
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$” 
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$” 
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$” 
正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”， 
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。 
验证身份证号（15位或18位数字）：“^d{15}|d{}18$” 
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12” 
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$” 
正确格式为：“01”“09”和“1”“31”。 
匹配中文字符的正则表达式： [u4e00-u9fa5] 
匹配双字节字符(包括汉字在内)：[^x00-xff] 
匹配空行的正则表达式：n[s| ]*r 
匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/ 
匹配首尾空格的正则表达式：(^s*)|(s*$) 
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)? 
(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） 
String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;} 
(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现 
String.prototype.trim = function() 
{ 
return this.replace(/(^s*)|(s*$)/g, ""); 
} 
(3)应用：利用正则表达式分解和转换IP地址 
function IP2V(ip) //IP地址转换成对应数值 
{ 
re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式 
if(re.test(ip)) 
{ 
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 
} 
else 
{ 
throw new Error("Not a valid IP address!") 
} 
} 
(4)应用：从URL地址中提取文件名的javascript程序 
s="https://3water.com/page1.htm"; 
s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2") ; //Page1.htm 
(5)应用：利用正则表达式限制网页表单里的文本框输入内容 
用正则表达式限制只能输入中文：onkeyup="value="/blog/value.replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))" 
用正则表达式限制只能输入全角字符： onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))" 
用正则表达式限制只能输入数字：onkeyup="value="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))" 
用正则表达式限制只能输入数字和英文：onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''

简单的js表单验证函数

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
微信小程序实现录音Record功能
May 09 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
自己写的Javascript计算时间差函数
Oct 28 #Javascript
Textarea根据内容自适应高度
Oct 28 #Javascript
将json当数据库一样操作的javascript lib
Oct 28 #Javascript
一个JavaScript变量声明的知识点
Oct 28 #Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 #Javascript
javascript中简单的进制转换代码实例
Oct 26 #Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 #Javascript
远程连接(2) 异步机制(1) reduce()(1) into outfile(1) 逻辑备份(1) 死锁(3) 限流器(1) 生命周期(1) 轮询锁(1) springCloud(6)
You might like
zend framework多模块多布局配置
2011/02/26 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
教你如何使用php session
2013/10/28 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
javascript中this关键字详解
2016/12/12 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
python Opencv将图片转为字符画
2021/02/19 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
django从后台返回html代码的实例
2020/03/11 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
Python字典dict常用方法函数实例
2020/11/09 Python
MSC邮轮官方网站：加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
澳大利亚顶级美发和美容贸易超市：glamaCo
2020/01/19 全球购物
Genny意大利官网：意大利高级时装品牌
2020/04/15 全球购物
考试诚信承诺书
2014/05/23 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python