JavaScript + 正则式实现表单参数校验

    本文使用的JavaScript多语言实现，请参考：http://dcao.iteye.comhttps://blog.csdn.net/blog/513944

    总体效果如下图:

Step 1 指定输入框的类型和输入的范围。

    字符串通过realType指定类型为字符串、option表示是否可选、minlength最小长度为2和 maxlength指定最大长度为20。

<input name="user" id="user" type="text"
realType="string"  option="true" minlength="2" maxlength="20" >

    数字通过realType指定类型为整型、min指定最小值为80、最大值为65535。

<input name="port" id="port" type="text"
realType="int"  min="80" max="65535" maxlength="5"  >

   IP地址只要指定类型为ip就可以。

<input name="ip"  id="ip" type="text" maxlength="15"
realType="ip">

    等等类型...

Step 2 为每个类型写检查函数。

     字符串的检查函数

function  checkString(input)
{

if (undefined == input)
{
return true;
}

// 检查是否可选，默认可选，可选且内容为空就通过检查
if (input.option!=undefined &&
input.option=="true" &&
(input.value==""))
{
return true;
}

// 必选不能为空
if (input.value=="" )
{
return false;
}

// 检查最小长度
var minlen = parseInt(input.minLen, 10);
if((! isNaN(minlen)) && input.value.length < minlen )
{
return  false;
}

// 检查最大长度
var maxlen= parseInt(input.maxLen, 10);
if((! isNaN(maxlen) )&& input.value.length > maxlen)
{
return false；
}

return true;
}

   数字检查函数

function checkInt(input)
{

// 检查是否可选，默认可选，可选且内容为空就通过检查
if (input.option!=undefined &&
input.option=="true" &&
(input.value==""))
{
return true;
}

// 必选不能为空
if (input.value=="" )
{
return false;
}

// 和数字正则式比较
var intReg = /^-?\d+$/;
if(!input.value.match(intReg))
{
return false;
}

var value = parseInt(input.value, 10);
if(isNaN(value))
{
return false;
}

// 检查最小值
var min = parseInt(input.min, 10);
if((! isNaN(min)) && value < min )
{
return false;
}

// 检查最大值
var max= parseInt(input.max, 10);
if((! isNaN(max)) && value > max)
{
return false;
}
return true;
}

   检查IP地址、email等的检查函数和上面的差不多，主要是采用正则式进行判断。

    等等类型的检查函数...

Step 3  出错时增加错误提示

    上面的检查函数都是返回true和false，还需要将错误信息提示给用户。

    给用户提示的方式有 Alert对话框、控件边上显示错误信息、冒泡提示等。为了支持多种形式错误提示的切换，提示信息的实现通过将提示函数作为参数传入检查函数实现。

function  checkString(input, errorFunction)  
{  
      
   ...      
 
   // 必选不能为空  
   if (input.value=="" )  
   {      
      errorFunction(can_not_empty);  
      return false;  
   }  
 
   ...        
   
   // 检查最大长度  
   var maxlen= parseInt(input.maxLen, 10);  
   if((! isNaN(maxlen) )&& input.value.length > maxlen)  
   {  
      errorFunction(str_too_long.fillArgs(input.maxlength));  
      return false;  
   }     
    //从错误改到正确的时候错误提示要清除掉   
   errorFunction();     
   return true;  
}

    弹出错误对话框的函数

function alertError(input, msg)
{
if (msg == undefined)
{
return true;
}
alert(msg);
input.focus();
input.select();
return false;
}

function  checkString(input, alertError) 效果如下图：

将错误显示到特定错误标签上的函数

function spanError(input, msg)
{

var name = "error" + input.id;
var span = document.getElementById(name);

if (span == undefined)
{
name = "error" + input.name;
span = document.getElementById(name);
if (span == undefined)
{
// 异常分支
alert("Need span:" + name);
return false;
}
}

if (msg== undefined)
{
span.innerHTML = "<img src='images/right.gif'/> "
}
else
{
span.innerHTML = "<img src='images/error.gif'/> " + msg;
}
return false;
}

 要求没有控件有对应的错误标签

<input name="ip"  id="ip" type="text" maxlength="15"
realType="ip">
<Span ID=erroruser></Span>

function  checkString(input, spanError) 效果如下图：

Step 4 什么时候检查？

 先写个帮助函数,作为所有类型控件的检查入口。

function checkInput(node, errorFunction)
{
if (node.realType == undefined)
{
return true;
}

if (errorFunction == undefined)
{
errorFunction = spanError;
}

var thisInputRight = true;
switch (node.realType)
{
case "int" :
if (!checkInt(node, errorFunction))
{
false;
}
break;

case "string" :
if (!checkString(node, errorFunction))
{
return false;
};
break;
case "ip" :
if (!checkIp(node, errorFunction))
{
return false;
};
break;
// .....
default :
alert("can't find realType: "+node.realType);
return false;
break;
}
}

控件失去焦点的是时候进行检查。

<input name="user" id="user" type="text"
realType="string"  option="true" minlength="2" maxlength="20"
onblur="checkInput(this)"
>

表单提交的是很进行检查, 如果检查不通过就终止提交表单。 

function checkForm(form, errorFunction)
{
if (errorFunction == undefined)
{
errorFunction = spanError;
}

var nodes = form.all;
var allRight = true;
var firstErrorInput = undefined;

for (var i=0;i<nodes.length;i++)
{
var node = nodes[i];
if (node.realType == undefined)
{
continue;
}

if (!checkInput(node))
{
allRight = false;
if (firstErrorInput == undefined)
{
firstErrorInput = node;
firstErrorInput.focus();
firstErrorInput.select();
}
}

}
return allRight;
}

onsubmit 函数返回失败的是时候就终止表单提交。

<form onsubmit = "return checkForm(this)">
...
</form>