javascript中的Regex對象regExp。
建立regExp對象文法
new regExp(pattern,attributes);
直接量文法
/pattern/attributes
也可以是
new regExp(/pattern/attributes)
注意：如果用new regExp(pattern,attributes)建立對象pattern作為一個字串需要加引號"";如果用直接量文法，在語句中不需要加引號。
regExp對象方法：
compile() 編譯Regex 返回一個編譯了的regExp對象
exec() 檢索字串中指定的值。並返回字串數組。
test() 檢索字串中指定的值，並返回true或false。
支援Regex的string對象的方法
search() 檢索與Regex匹配的字串
match() 檢索與Regex匹配的一個和多個字串
replace() 用指定的字串替代與Regex匹配的字串
split() 把字串分割為字串數組
實現表單驗證
表單代碼
<form id="form" action="">
<table>
<tr><td>Name<span id="namespan"></span></td></tr>
<tr><td><input type="text" id="name" name="name" onBlur="valName()"/></td></tr>
<tr><td>Age<span id="agespan"></span></td></tr>
<tr><td><input type="text" id="age" name="age" onBlur="valAge()"/></td></tr>
<tr><td>Birthday<span id="birthdayspan"></span></td></tr>
<tr><td><input type="text" id="birthday" name="birthday"/></td></tr>
<tr><td>Email<span id="emailspan"></span></td></tr>
<tr><td><input type="text" id="email" name="email"/></td></tr>
<tr><td>Sex<span id="sexspan"></span></td></tr>
<tr><td><input type="radio" id="sex" name="sex" value="Male" checked="checked"/>Male
<input type="radio" id="sex" name="sex" value="Female"/>Female</td></tr>
</table>
</form>
javascript代碼
function valName(){
var pattern = new RegExp("^[a-z]([a-z0-9])*[-_]?([a-z0-9]+)$","i");
var str1=document.getElementById("name").value;
if(str1.length>=8){
if(pattern.test(str1)){
//alert("OK");
document.getElementById("namespan").innerHTML="";
return true;
}
else{
document.getElementById("namespan").innerHTML="<span class='note'>使用者名稱至少需要8個字元，必須以字母開頭，以字母或數字結尾，可以有-和_</span>";
return false;
}
}
else{
document.getElementById("namespan").innerHTML="<span class='note'>使用者名稱至少需要8個字元，必須以字母開頭，以字母或數字結尾，可以有-和_</span>";
return false;
}
}
function valAge(){
var str = document.getElementById("age").value;
var pattern=/\b\d\d{0,1}\b/g;
if(str.match(pattern)==null){
document.getElementById("agespan").innerHTML="<span class='note'>Age range is 0-99</span>";
return false;
}
else{
document.getElementById("agespan").innerHTML="";
return true;
}
}
網頁顯示效果
