JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情
今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西
地址如下:
引用
http://blog.csdn.net/goodfunman/archive/2005/10/21/513338.aspx
http://blog.csdn.net/yhl_621/archive/2006/03/04/615273.aspx
http://blog.csdn.net/NetDreamwing/archive/2004/10/11/131975.aspx
http://regexlib.com/Search.aspx
不管是动态网站,还是其它B/S结构的系统,都离不开表单
表单做为客户端向服务器提交数据的载体担当相当重要的角色.
这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据
保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个
项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数…
本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.
个人以为表单的验证应该包含两部分:
第一,判断用户输入的数据是否合法.
第二,提示用户你的数据为什么是不合法的.
所以,我们的通用表单验证函数要实现的功能就是:
第一,取得用户输入的数据GetValue(el)
第二,验证用户的数据CheckForm(oForm)
IE支持自定义属性,这就是这个通用函数实现的基础
我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.
check属性:该属性用于存储数据合法性的正则表达式.
warning属性:该性性用于存储出错误提示信息.
第三,返回有误的表单提示GoBack(el)
这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)
搞错了就全功尽弃了
写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.
我们要做的就是写好正则表达式!
接下来我们来分析一下所有的表单元素
按其共性,我们将它们分为三类
每类表单的特点不一样,我们的目标就是写出通用的.
Check.js JS函数文件
////////////////////////////////////////////////////////////////////////////////
/*
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
* 功能:通用验证所有的表单元素.
* 使用:
* <form name="form1" onsubmit="return CheckForm(this)">
* <input type="text" name="id" check="^\S+$" warning="id不能为空,且不能含有空格"/>
* <input type="submit"/>
* </form>
* author:wanghr100(灰豆宝宝.net)
* email:wanghr100@126.com
* update:19:28 2004-8-23
* 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.
* 已实现功能:
* 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
* 待实现功能:把正则表式写成个库.
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
*/
////////////////////////////////////////////////////////////////////////////////
//主函数
function CheckForm(oForm)
{
var els = oForm.elements;
//遍历所有表元素
for(var i=0;i<els .length;i++)
{
//是否需要验证
if(els[i].check)
{
//取得验证的正则字符串
var sReg = els[i].check;
//取得表单的值,用通用取值函数
var sVal = GetValue(els[i]);
//字符串->正则表达式,不区分大小写
var reg = new RegExp(sReg,"i");
if(!reg.test(sVal))
{
//验证不通过,弹出提示warning
alert(els[i].warning);
//该表单元素取得焦点,用通用返回函数
GoBack(els[i])
return false;
}
}
}
}
//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
//取得表单元素的类型
var sType = el.type;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea": return el.value;
case "checkbox":
case "radio": return GetValueChoose(el);
case "select-one":
case "select-multiple": return GetValueSel(el);
}
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
function GetValueChoose(el)
{
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(el.name);
for(var i=0;i<tmpels .length;i++)
{
if(tmpels[i].checked)
{
sValue += "0";
}
}
return sValue;
}
//取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
function GetValueSel(el)
{
var sValue = "";
for(var i=0;i<el.options.length;i++)
{
//单选下拉框提示选项设置为value=""
if(el.options[i].selected && el.options[i].value!="")
{
sValue += "0";
}
}
return sValue;
}
}
//通用返回函数,验证没通过返回的效果.分三类进行取值
//文本输入框,光标定位在文本输入框的末尾
//单多选,第一选项取得焦点
//单多下拉菜单,取得焦点
function GoBack(el)
{
//取得表单元素的类型
var sType = el.type;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();
case "checkbox":
case "radio": var els = document.getElementsByName(el.name);els[0].focus();
case "select-one":
case "select-multiple":el.focus();
}
}
demo.htm 演示文件
<script language="JavaScript" src="Check.js"></script>
通用表单函数测试:
<form name="form1" onsubmit="return CheckForm(this)">
test:<input type="text" name="test"/>不验证<br />
账号:<input type="text" check="^\S+$" warning="账号不能为空,且不能含有空格" name="id"/>不能为空<br />
密码:<input type="password" check="\S{6,}" warning="密码六位以上" name="id"/>六位以上<br />
电话:<input type="text" check="^\d+$" warning="电话号码含有非法字符" name="number" value=""/><br />
相片上传:<input type="file" check="(.*)(\.jpg|\.bmp)$" warning="相片应该为JPG,BMP格式的" name="pic" value="1"/><br />
出生日期:<input type="text" check="^\d{4}\-\d{1,2}-\d{1,2}$" warning="日期格式2004-08-10" name="dt" value=""/>日期格式2004-08-10<br />
省份:
<select name="sel" check="^0$" warning="请选择所在省份">
<option value="">请选择
</option><option value="1">福建省
</option><option value="2">湖北省
</option></select>
<br />
选择你喜欢的运动:<br />
游泳<input type="checkbox" name="c" check="^0{2,}$" warning="请选择2项或以上"/>
篮球<input type="checkbox" name="c"/>
足球<input type="checkbox" name="c"/>
排球<input type="checkbox" name="c"/>
<br />
你的学历:
大学<input type="radio" name="r" check="^0$" warning="请选择一项学历"/>
中学<input type="radio" name="r"/>
小学<input type="radio" name="r"/>
<br />
个人介绍:
<textarea name="txts" check="^[\s|\S]{20,}$" warning="个人介绍不能为空,且不少于20字"></textarea>20个字以上
<input type="submit"/>
</form>
Tag: 验证, JavaScript, 正则表达式
分享到:
相关推荐
使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 (this)"> 将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。 2、空值验证 表单中任意域...
这是一个通用的js表单验证,你只需要建立一个静态页面就可以实现表单数据的验证,运用的知识是正则表达式。
validator 通用JS表单验证类,JavaScript+XML,内含使用教程,很方便就可以嵌入到你的网页中。
通用JS表单验证类_validator实例演示,含有一个说明文档,本验证插件可对表单中常见的电话、字符、邮箱地址、网址、身份证号码、密码、年龄格式、IP格式等特殊的字符格式做出检测判断,避免用户提交到数据库的数据不...
NULL 博文链接:https://why-rj.iteye.com/blog/963090
is.js是一个强大的通用js表单验证工具类。你可以使用js.js来检测任何东西,例如检测所给的值是否为参数,是否是数组,是否是超链接,甚至可以检测浏览器类型,正则表达式和数学表达式等。
这是一个通用js表单验证,功能不是很强大,但是很实用。
忙了一天,总算是完成了 因为现在的项目中使用了很多struts标签,原来网上流传的validate.js不能用了,所以狠下心来修改了validate,用了不同的方法实现了通用验证,并且与标签分离,可以与struts标签结合使用
万能通用智能JS表单验证,自动匹配正则,使用超级简单方便,纠结了很久哦,觉得好东西还是应该拿出来给大家分享。
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
通用表单验证Jquery插件
JS通用表单验证函数,工作中很好的参考
js表单验证控制代码大全 /* 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能...
NULL 博文链接:https://wlh269.iteye.com/blog/372222
javascript表单验证大全 js表单验证控制代码大全 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能...
6: js email验证 、js 判断email 、信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证、判断密码 2.1: js 不为空、为空或不是对象 、判断为空、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为...
使用JavaScript进行表单验证是目前通用的做法。本文实现了常见的三种基本的表单区域的验证,并给出了一个循环提示的通用的实例,提出了表单验证的需注意的原则
Validate通用表单验证Jquery插件.zip。前端js实现 表单多种验证,不需要请求服务器,正则表达式匹配手机号、邮箱、IP地址、身份证、中文等。