mootools点击文本框设置及数据验证

除了mootools的核心js文件外。自定义一个js文件external_file.js，如下：

var editColorObj ;
function  EditColor()
{
 var o = new Object();
 o.oldColor = ""; //每次保存老的颜色
 o.curColor = "#FF0000"; //默认颜色

 o.setBackColor = function(event){//设置颜色
  o.cObj = event.target;
  o.cStyle = o.cObj.get("type");
  if(o.cStyle!="checkbox" && o.cStyle!="radio" && o.cStyle!="button"){
   o.oldColor = o.cObj.getStyle("background-color");
   o.cObj.setStyle("background-color",o.curColor);
  }
 };
 o.backBackColor = function(event){//归回原来颜色
  o.cObj = event.target;
  o.cStyle = o.cObj.get("type");
  if(o.cStyle!="checkbox" && o.cStyle!="radio" && o.cStyle!="button"){
   o.cObj.setStyle("background-color",o.oldColor);
  }
 };
 o.setCurColor = function(paramColor){//设置新的颜色
  o.curColor = paramColor;
 };
 //找出对象--除checkbox,radio,button以外的input及textarea
 o.fullObjes = $$("input");
 o.fullArea = $$("textarea");
 o.fullSel = $$("select");
 o.fullObjes.combine(o.fullArea);//将textarea放入对象数组中
 o.fullObjes.combine(o.fullSel);//将select放入对象数组中
 o.fullObjes.addEvent("focus",o.setBackColor);//绑定获取焦点事件
 o.fullObjes.addEvent("blur",o.backBackColor);//绑定失去焦点事件
 return o;
};

var editChangeValue = function(event){
 var obj = event.target;
 var texttype = obj.get("texttype");
 var ematch = obj.get("ematch");
 var tag = true;//默认验证通过
 if($chk(texttype))//有texttype属性
 {
  texttype = texttype.trim().toLowerCase();
  var m_match = "";
  if(texttype == "number"){
   m_match = /^(-|/+)?/d+(/./d+)?$/;
  }else if(texttype == "int"){//整数（包括正整数、负整数、0）
   m_match = /^((-?[0-9]*[1-9][0-9]*)|(0+))$/;
  }else if(texttype == "+int"){//正整数
   m_match =/^[0-9]*[1-9][0-9]*$/;
  }else if(texttype == "-int"){//负整数
   m_match =/^-[0-9]*[1-9][0-9]*$/;
  }else if(texttype == "+int0"){//非负整数
   m_match = /^/d+$/;
  }else if(texttype == "-int0"){//非正整数
   m_match = /^((-[0-9]*[1-9][0-9]*)|(0+))$/;
  }else if(texttype == "float"){//浮点数
   m_match =/^((-?/d+)(/./d+))|(0)$/;
  }else if(texttype == "+float"){//正浮点数
   m_match =/^(/d+)(/./d+)$/;
  }else if(texttype == "-float"){//负浮点数
   m_match =/^(-/d+)(/./d+)$/;
  }else if(texttype == "+float0"){//非负浮点数
   m_match =/^((/d+)(/./d+))|(0)$/;
  }else if(texttype == "-float0"){//非正浮点数
   m_match =/^((-/d+)(/./d+))|(0)$/;
  }else if(texttype == "date"){//日期时间
   m_match =/^((/d{2}(([02468][048])|([13579][26]))[/-///s]?((((0?[13578])|(1[02]))[/-///s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[/-///s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[/-///s]?((0?[1-9])|([1-2][0-9])))))|(/d{2}(([02468][1235679])|([13579][01345789]))[/-///s]?((((0?[13578])|(1[02]))[/-///s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[/-///s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[/-///s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))/;
  }else if(texttype == "email"){//email
   m_match = /^([A-Za-z0-9])(/w)+@(/w)+(/.)(com|com/.cn|net|cn|net/.cn|org|biz|info|gov|gov/.cn|edu|edu/.cn)/; 
  }else if(texttype == "url"){//URL
   m_match = /^http(s)?:////([/w/u4e00-/u9fa5-]+/.)+[/w/u4e00-/u9fa5-]+((:/d+)?)+(//[/w/u4e00-/u9fa5- ./?%&=]+)*$/;
  }else if(texttype == "phone"){//座机
   m_match =/^(0[0-9]{2,3}/-?)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$/;
  }else if(texttype == "mobil"){//手机
   m_match ==/^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+$/;
  }else if(texttype == "call"){//座机或者手机
   m_match =/(/d{11})|^((/d{7,8})|(/d{4}|/d{3})-(/d{7,8})|(/d{4}|/d{3})-(/d{7,8})-(/d{4}|/d{3}|/d{2}|/d{1})|(/d{7,8})-(/d{4}|/d{3}|/d{2}|/d{1}))$/;
  }
  tag =obj.value.test(m_match,"i");
  if(!tag){
   obj.value = "";
   return;//直接返回，不再验证下面的正则表达式
  }
 }
 if($chk(ematch)){//有ematch(正则表达式)属性
  try{
   ematch = eval(ematch.trim());//eval(ematch.trim().escapeRegExp());
   tag = obj.value.test(ematch);
   if(!tag){
    obj.value="";
   }
  }catch(e){}//alert(e);
 }
};
window.addEvent('domready',function(){
 //在页面中设置单个页面另外的颜色
 //window.addEvent('domready',function(){
 // editColorObj.setCurColor("#FF0000");
 //});
 editColorObj = new EditColor();//页面文本框或选择框获取焦点变颜色
 //设置文本类型
 var fullObjes = $$("input");
 var fullArea = $$("textarea");
 fullObjes.combine(fullArea);
 fullObjes.addEvent("change",editChangeValue);//文本内容有改变，且失去焦点时
});

页面使用如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>30 days of moo - day 1</title>
<link rel=stylesheet href="css/main.css" type="text/css" media=screen>
<script src="js/mootools1.2.js" type="text/javascript"></script>
<script src="js/external_file.js" type="text/javascript"></script> 
<script type="text/javascript">

window.addEvent('domready',function(){
 //editColorObj.setCurColor("");
});
</script>  
</head>
<body>
<input type="Checkbox"/><br>
<input type="radio"  name="jzd"/><input type="radio" name="jzd"/><br>
<textarea  ematch="/^-[0-9]*[1-9][0-9]*$/" ></textarea><br>
number <input  texttype="number"  /><br>
int <input  texttype="int" /><br>
+int <input  texttype="+int" /><br>
-int <input  texttype="-int" /><br>
+int0<input  texttype="+int0" /><br>
-int0 <input  texttype="-int0" /><br>
float <input  texttype="float" /><br>
+float <input  texttype="+float" /><br>
-float <input  texttype="-float" /><br>
+float0<input  texttype="+float0" /><br>
-float0 <input  texttype="-float0" /><br>
string <input  texttype="string" /><br>
date <input  texttype="date" /><br>
email <input  texttype="email" /><br>
url <input  texttype="url" /><br>
phone <input texttype="phone" /><br>
mobil <input  texttype="mobil" /><br>
call <input  texttype="call" /><br>
<select><option>ddd</option><option>ddd2</option><option>ddd2</option><option>ddd2</option><option>ddd2</option><option>ddd2</option><option>ddd2</option></select>
<textarea ></textarea><br>
<input id="netTween_set" type="button" value=" 按钮 "/>
</body>
</html>