学习JQuery后的一个实际应用--页面表单验证（适合大规模应用）

最新推荐文章于 2022-04-05 15:12:40 发布

iteye_1176

最新推荐文章于 2022-04-05 15:12:40 发布

阅读量106

点赞数

文章标签： javascript 数据库 ViewUI

该表达验证的功能如下：

1、针对每个表单输入控件，用户可设置自定义级别和基本级别的匹配表达式和相应的提示信息；

2、用户离开表单输入控件时会自动校验，如果校验非法，该控件的边框底色会变红

3、如果在保存按钮上注册检查所有表单输入控件的代码，则会在点击按钮保存时检查所有输入表单控件，校验不合法的底色变红，

焦点自动定位到第1个输入非法的表达控件，也不会触发回发事件。

4、鼠标放在输入非法的表达控件上，会在输入控件的下方显示输入提示信息。

优势：1、验证表达式和提示信息可以通过服务器端属性注册实现，便于程序员使用，也便于扩展到从数据库获取设置信息；

2、替代使用aspnet提供的表达验证控件，既可以减少验证控件对布局的影响，因为验证和输入控件集成，增加了可维护性。

页面表单验证代码：

注：BaseRegExp为基本验证表达式,OrgRegExp为组织级正则表达式,EntRegExp为企业级验证表达式。一般的应用只要BaseRegExp即可.

(function(){
var InvalidationCheck = function(){

//输入匹配检测
function CheckValidation(input,regexp)
{
if(!input)
{
input = "";
}
var theMatch =input.match(regexp);
if(theMatch)
{
return true;
}
else
{
return false;
}
}

//创建或获取提示框,如果表单控件的输入不合法，一是该控件的边框颜色会变，而是鼠标经过时会提示规则信息，对客户比较友好。
function CreateMsgDiv(msg)
{
var theDiv = $('#MyMessageDiv');
if(theDiv.length<=0)
{
theDiv = $("<div id='MyMessageDiv' class='MyTooltip' style='display:block'>"+msg+"</div>");
}
return theDiv;
}
//获取元素的位置.
function GetElementPos(el)
{
var op = el[0];
var theX = op.offsetLeft;
var theY = op.offsetTop;
while(op =op.offsetParent)
{
theX += op.offsetLeft;
theY += op.offsetTop;
}
return [theX,theY];
}
//获取输入规则信息，用于提示用户.
function GetInputRegulation(obj)
{
var theRet = obj.attr("inputregmsg");
return ((theRet==null)?"":theRet);
}

//设置表单输入控件的状态,true表示输入合法，false表示输入非法.
function SetInputState(obj,state)
{
if(state==false)
{
obj.attr("inputstate","false");
}
else
{
obj.attr("inputstate","true");
}
}

//获取表达输入控件状态.
function GetInputState(obj)
{
return (obj.attr("inputstate") != "false")?true:false;
}

//保存表单控件的样式,一旦输入合法后可恢复

//获取当前样式类名
function GetCurrClassName(obj,IsValid)
{
var theStyle = null;
if(IsValid==true)
{
theStyle = obj.attr("oldclassname");
if(!theStyle)
{
theStyle ="";
}
}
else
{
theStyle = "InputIsInvalid";
}

return theStyle;
}

//设置当前显示样式.
function SetCurrDisplayStyle(obj,IsValid)
{
obj.attr("className",GetCurrClassName(obj,IsValid));
}

//检查所有表单控件，适用于保存按钮.
function CheckAllInput()
{
var theFirstInvalidObj = null;
//处理输入框
var inputs = $(':text:enabled,textarea:enabled,select:enabled');
for(var i=0;i<inputs.length;i++)
{
//获取OrgRegExp
var theCurrInput =$(inputs[i]);
var theCurrOK = true;
SetOldClassName(theCurrInput);
var theOrgRE = theCurrInput.attr("OrgRegExp");
if(theOrgRE)
{
theCurrOK = CheckValidation(theCurrInput.val(),theOrgRE);
SetCurrDisplayStyle(theCurrInput,theCurrOK);
if(theCurrOK==false)
{
SetInputState(theCurrInput,false);
if(!theFirstInvalidObj)
{
theFirstInvalidObj = theCurrInput;
}
continue;
}
}
//获取基本的校验表达式
var theBaseRE = theCurrInput.attr("BaseRegExp");
if(theBaseRE)
{
theCurrOK = CheckValidation(theCurrInput.val(),theBaseRE);
SetCurrDisplayStyle(theCurrInput,theCurrOK);
if(theCurrOK == false)
{
if(!theFirstInvalidObj)
{
theFirstInvalidObj = theCurrInput;
}
}
}
SetInputState(theCurrInput,theCurrOK);
}

//获取第一个输入非法的表单控件，默认会自动定位到该控件.
return theFirstInvalidObj;
}
this.ShowTooltipMsg =function(event)
{
var obj = $(this);
if(GetInputState(obj)==false)
{
var Msg = GetInputRegulation(obj);
if(Msg)
{
var theDiv = CreateMsgDiv(Msg);
theDiv.appendTo('body');
var thePos = GetElementPos(obj);
theDiv.css("left",thePos[0] + event.offsetX + "px");
theDiv.css("top",thePos[1] +23+ "px");
}
}
}
this.HiddenTooltipMsg =function(event)
{
var obj = $(this);
if(GetInputState(obj)==false)
{
var theDiv = $("#MyMessageDiv");
if(theDiv.length>0)
{
$("body")[0].removeChild(theDiv[0]);
}
}
}
this.DoValidationAlbert =function()
{
var theFirstObj = CheckAllInput();
if(theFirstObj)
{
try
{
theFirstObj.focus();
}
catch(ex)
{
}
return false;
}
return true;
}
this.CheckInputValidation=function()
{
//获取OrgRegExp
var theCurrInput =$(this);
var theCurrOK = true;
//设置旧的样式类.
SetOldClassName(theCurrInput);
var theOrgRE = theCurrInput.attr("OrgRegExp");
if(theOrgRE)
{
theCurrOK = CheckValidation(theCurrInput.val(),theOrgRE);
SetCurrDisplayStyle(theCurrInput,theCurrOK);
}
if(theCurrOK==false)
{
SetInputState(theCurrInput,false);
return;
}
//获取基本的校验表达式
var theBaseRE = theCurrInput.attr("BaseRegExp");
if(theBaseRE)
{
theCurrOK = CheckValidation(theCurrInput.val(),theBaseRE);
SetCurrDisplayStyle(theCurrInput,theCurrOK);
}
SetInputState(theCurrInput,theCurrOK);
}
this.Init = function()
{
$(':text:enabled,textarea:enabled,select:enabled').mouseenter(this.ShowTooltipMsg)
.mouseleave(this.HiddenTooltipMsg)
.mousemove(this.ShowTooltipMsg)
.keypress(this.HiddenTooltipMsg)
.blur(this.CheckInputValidation);
$(document.forms[0]).submit(this.DoValidationAlbert);
}
}
$InputCheck = new InvalidationCheck();
})();
用法：要运行该代码，需要JQuery库。如果不需要中间回发，只需要调用Init初始化一下，验证正则表达式可通过服务器端服务控件注册属性的方式加入。

如果需要回发，则控件事件触发函数挂接，需要在服务器端来完成。

如果利用服务器控件，有两种方法完成验证表达式和提示信息的方式：一是通过对控件注册属性来完成，一是可以简单继承一下控件，将需要的信息作为服务器控件的属性，并输出到客户端属性。我个人偏向于后一种方法，因为这样，程序员既可以通过所见即所得的方式使用，而且这些验证信息可以从数据库读取，适合规模应用，而且事件的注册也可以在控件中自动完成，免除客户端注册或者手工设置的麻烦。