简单的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,''
Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
自己写的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
You might like
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
浙江文明网签名寄语
2014/01/18 职场文书
机电一体化求职信
2014/03/10 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers