首页
所有分类
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 格式字符串的应用
Mar 29 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
FutureTask(3) CompletableFuture(1) Springboot-cli(1) 异步回调(1) 对齐打印(1) ForkJoin(1) 五子棋(12) format(1) 计算器(5) 底部导航(1)
You might like
php操作memcache缓存方法分享
2015/06/03 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
php生成动态验证码gif图片
2015/10/19 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
批量实现面向对象的实例代码
2013/07/01 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
Python正则表达式常用函数总结
2017/06/24 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python交互模式基础知识点学习
2020/06/18 Python
python 发送get请求接口详解
2020/11/17 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
您在慕尼黑的跑步商店：Lauf-bar
2019/10/11 全球购物
保险经纪人求职信
2014/03/11 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
交通事故委托书范本
2014/09/28 职场文书
经典爱情感言
2015/08/03 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
nginx 配置指令之location使用详解
2022/05/25 Servers
Java使用HttpClient实现文件下载
2022/08/14 Java/Android