javascript正则表达式验证表单

javascript中的正则表达式对象regExp。

创建regExp对象语法

new regExp(pattern,attributes);

直接量语法

/pattern/attributes

也可以是

new regExp(/pattern/attributes)

 

注意：如果用new regExp(pattern,attributes)创建对象pattern作为一个字符串需要加引号"";如果用直接量语法，在语句中不需要加引号。

regExp对象方法：

compile() 编译正则表达式 返回一个编译了的regExp对象

exec()   检索字符串中指定的值。并返回字符串数组。

test()　检索字符串中指定的值，并返回true或false。

 

支持正则表达式的string对象的方法

search() 检索与正则表达式匹配的字符串

match() 检索与正则表达式匹配的一个和多个字符串

replace() 用指定的字符串替代与正则表达式匹配的字符串

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;

}

}

 

网页显示效果