1.正则表达式的应用
(参考资料:(1)正则表达式的优先级(2)括号使用)
正则表达式用于检测输入的邮箱地址是否合法:var reg=/^([0-9a-zA-Z]+[\_|\.]?)*[a-zA-Z0-9]+@([0-9A-Za-z]+[\.|\_]?)*[a-zA-Z0-9]+\.[A-Za-z]{2,3}$/g;
[0-9a-zA-Z]+[\_|\.]? 字母数字开头,后面可以是_ . 也可以没有,在[]中使用分支条件
使用正则表达式验证这样一个字符串,“12,3,2,1,3,8,9,10”所有的数字都小于等于12,除了最后一个数字,其余的数字后面都有一个逗号,
核心就在于使用正则表达式验证数字的范围为1-12,1-9可以通过“[1-9]”表示,10-12可以通过"1[0-2]"表示,在此可以使用分支条件来判断是一位数还是二位数,因此就有两种写法
([1-9])|(1[0-2]) 或者 (1[0-2])|([1-9]),来看看这两种写法的差异。
var reg4=/^(((1[0-2])|[1-9])\,)*((1[0-2])|[1-9])$/g;//
var reg7=/^(([1-9]|(1[0-2]))\,)*([1-9]|(1[0-2]))$/g;
var str="12,11,1,7,8,12,9";
console.log(reg4.test(str));//true
console.log(reg7.test(str));//true
说明这两个是没有差异的,此外还要注意一点括号的使用,在正则表达式中和在其他计算式中一样,都可以通过括号来改变匹配的优先级,有关优先级的,可以参考http://blog.csdn.net/danzhang1010/article/details/28242335
2.onpropertychange,oninput,onchange 这三个事件用于监控控件属性改变。
onchange:当控件的属性发送改变时触发,在低版本的ie中(ie8及以下)当控件的属性,无论是value还是样式发送改变,在控件失去焦点之后就会触发该事件;在高版本的ie及其他浏览器中,只有当内容发生改变并且当控件失去焦点之后会触发该事件。
onpropertychange:ie中专有的属性发生改变时触发的事件,该事件不会等控件失去焦点之后再触发。如果在该事件的处理程序中改变控件属性,就会造成栈溢出。
oninput: 非ie浏览器中的事件,但是只有当控件的内容发送改变时才触发该事件。
注意:在chrome和非chrome中触发input事件有所不同,在chrome中,如果使用输入法输入中文,由于中文需要先输入拼音字母或者笔画,会造成触发好几次input事件,但是在非chrome中,只有当内容输入到文本框,将文本框中的值改变之后,才会触发oninput事件。
可以利用onpropertychange和oninput完成类似的功能
<body>
<textarea id='testArea' cols="20" rows="10" color='grey'>
welcometo my blog.
</textarea>
<p>你还可以输入 <span id='wordcount'>200</span>字</p>
<input type="button" value='changeTheTextAreaValue' id='Btn'/>
<p id='result'></p>
<script type="text/javascript" src='../AdvancedDomScripting/js/ADS.js'></script>
<script type="text/javascript">
(function(){
var result=ADS.$('wordcount');
var max=200;
ADS.addEvent('testArea','focus',function(e){
var target=ADS.getEventTarget(e);
if(target.value==target.defaultValue){
target.value="";
target.style.color='black';
}
});
ADS.addEvent('testArea','blur',function(e){
var target=ADS.getEventTarget(e);
if(target.value.replace(/(^(\s)*)|((\s)*)$/g,"")==""){
target.value=target.defaultValue;
target.style.color='grey';
result.innerHTML=max;
}
});
ADS.addEvent('testArea','change',function(){
//console.log("changed:"+this.value);
//result.innerHTML+="changed:"+this.value+"<br>";
//会在元素的属性(在低版本ie中的 文本或者样式等任何属性,在非ie和高版本的ie中的内容属性)改变,并且元素失去焦点的时候触发
});
ADS.addEvent('testArea','propertychange',function(e){
//console.log("propertychangechanged:"+this.value);
//result.innerHTML+="propertychangechanged:"+this.value+"<br>";
//ie特有的,会在元素的属性(文本或者样式等任何属性)改变,但是元素不一定失去焦点就会触发
var target=ADS.getEventTarget(e);
var target=ADS.getEventTarget(e);
var remain=max-target.value.length;
if(remain<=0){
remain=0;
target.value=target.value.substring(0,199);
}
result.innerHTML=remain;
});
ADS.addEvent('testArea','input',function(e){
//document.write("input:"+this.value);
//result.innerHTML+="input:"+this.value+"<br>";
//其他浏览器兼容的方法,只在文本内容改变时触发,在输入中文时会因为输入法的原因在不同浏览器中(chrome和非chrome)的触发次数也不一样,在chrome中,没输入一个英文字母都会触发
var target=ADS.getEventTarget(e);
var remain=max-target.value.length;
if(remain<=0){
remain=0;
target.value=target.value.substring(0,199);
}
result.innerHTML=remain;
});
ADS.addEvent('Btn','click',function(){
var area=ADS.$('testArea');
area.style.color='red';
});
})();
</script>
</body>