编程 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 相关文章推荐

B/S开发中常用javaScript技术与代码

Mar 09 Javascript

jquery控制select的text/value值为选中状态

Jun 03 Javascript

Bootstrap网格系统详解

Apr 26 Javascript

jQuery.Callbacks()回调函数队列用法详解

Jun 14 Javascript

浅谈addEventListener和attachEvent的区别

Jul 14 Javascript

jQuery Masonry瀑布流插件使用方法详解

Jan 18 Javascript

JavaScript之面向对象_动力节点Java学院整理

Jun 29 Javascript

JS实现页面打印（整体、局部）

Aug 18 Javascript

js时间戳与日期格式之间转换详解

Dec 11 Javascript

React 无状态组件(Stateless Component) 与高阶组件

Aug 14 Javascript

VUE 配置vue-devtools调试工具及安装方法

Sep 30 Javascript

Vue实现商品飞入购物车效果(电商项目)

Nov 26 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