除了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>