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

    本文使用的JavaScript多语言实现，请参考：http://dcao.iteye.com/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>