通用表单验证函数

2016-01-29 11:37 8 1 收藏

通用表单验证函数,通用表单验证函数

【 tulaoshi.com - Javascript 】

不管是动态网站,还是其它B/S结构的系统,都离不开表单
表单做为客户端向服务器提交数据的载体担当相当重要的角色.
这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据
保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个
项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...

本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.

个人以为表单的验证应该包含两部分:
第一,判断用户输入的数据是否合法.
第二,提示用户你的数据为什么是不合法的.

所以,我们的通用表单验证函数要实现的功能就是:
第一,取得用户输入的数据GetValue(el)
第二,验证用户的数据CheckForm(oForm)
IE支持自定义属性,这就是这个通用函数实现的基础
我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.
check属性:该属性用于存储数据合法性的正则表达式.
warning属性:该性性用于存储出错误提示信息.
第三,返回有误的表单提示GoBack(el)
这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)
搞错了就全功尽弃了 :)
<form onsubmit="return CheckForm(this)"

写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.
我们要做的就是写好正则表达式!

接下来我们来分析一下所有的表单元素
按其共性,我们将它们分为三类
每类表单的特点不一样,我们的目标就是写出通用的.

1.文输入框Text
<input type="text" name="txt"
<input type="password" name="pwd"
<input type="hidden" name="hid"
<input type="file" name="myfile"
<textarea name="txts"</textarea
2.单多选框Choose
<input type="checkbox" name="c"
<input type="checkbox" name="c"
<input type="radio" name="r"
<input type="radio" name="r"
3.单多下拉菜单Select
<select name="sel"</select
<select name="sels" multiple</select

讲了一堆"大道理"太抽象了,代码更有说服力!

//主函数
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": retur

来源:http://www.tulaoshi.com/n/20160129/1482810.html

上一篇：最精致的日历式日期输入控件
下一篇：调用IE内置打印组件完成web打印方案及例程

看过《通用表单验证函数》的人还看了以下文章更多>>

Ajax 表单验证实现代码

标签： Web开发

兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证环境:ruby 1.8.6 + rails 2.1.0 + windows 核心代码: html: 浏览器禁用javascript时显示提示信息: 代码如下： noscript div style="color:red"您的浏览器不支持javascript,部分功能无法使用/div /noscript 当浏览器禁用JS后,提交按钮不可用,实现客户...

编辑浪子版表单验证类

标签： Web开发

Autor:编辑浪子 From:http://bbs.51js.com/thread-68161-1-1.html //表单验证类 function ValidatorClass() { var IsError = false; //检查姓名，只能输入中文、字母、数字、下划线 this.ChkName = function(obj,msg) { if (IsError) return; if ...

JavaScript表单验证是否为中文

标签： Web开发

JavaScript表单验证是否为中文，判断一个输入量是否为中文，通过正则表达式实现。 // 检查是否为中文 function isChn(str){ var reg = /^[u4E00-u9FA5]+$/; if(!reg.test(str)){ return false; } ...

javascript 验证日期的函数

标签： Web开发

导致数据库跑任务出现错误(任务根据日期来计算状态的，由于数据量比较大，都做成任务夜里跑)，为了避免再出现此类的错误，所以增加了一个验证日期有效性的javascript方法。本方法能够有效的验证闰年，支持的日期格式有：2009-01-01、2009/01/01两种格式。 javascript代码代码如下： //判断日期是否合法 function IsDate(oTextbox) { v...

基于jQuery的表单验证插件：jValidate

标签： Web开发

网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JavaScript框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。网上的各类表单验证插件的验证规则都是写在脚本里的，但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子： ...

查看更多精彩>>