js使用正則驗證表單數據

一個簡單的驗證列子,代碼如下:

<html>
<head>
<title>正則表達式驗證表單</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<style type="text/css">
		.valid{color:green;}
		.invalid{color:red;}
	</style>
</head>
<body>
	<h2>表單驗證</h2>
	<form method="POST" οnsubmit="return checkForm(this)">
		用戶名:<input type="text" name="uname" /><i>5-15個字母,數字,下劃線,不能以字母開頭</i><br>
		QQ:<input type="text" name="qq" /><i>5-12位QQ號</i><br>
		Email:<input type="text" name="email" /><i>正確的電子郵箱</i><br>
		<input type="submit" name="sub" value="提交"/><br>
	</form>
	<p id="info"></p>
	
</body>
</html>
<script>
function checkForm(myForm){
	var info = document.getElementById("info");
	info.innerHTML = "";
	//驗證用戶名
	var re = /^[a-zA-Z_][0-9a-zA-Z_]{4,14}$/;
	var val = myForm.uname.value;
	if(!re.test(val))
	{
		info.innerHTML += "<span class='invalid'>用戶名["+val+"]不合法</span><br>";
	}
	else
	{
		info.innerHTML += "<span class='valid'>用戶名["+val+"]合法</span><br>";
	}
	
	//驗證qq號
	re = /^[1-9][0-9]{4,11}$/;
	val = myForm.qq.value;
	if(!re.test(val))
	{
		info.innerHTML += "<span class='invalid'>QQ號["+val+"]不合法</span><br>";
	}
	else
	{
		info.innerHTML += "<span class='valid'>QQ號["+val+"]合法</span><br>";
	}
	
	//驗證EMAIL
	re = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+\.[a-zA-Z]+(\.[a-zA-Z]+)?$/;
	val = myForm.email.value;
	if(!re.test(val))
	{
		info.innerHTML += "<span class='invalid'>email["+val+"]不合法</span><br>";
	}
	else
	{
		info.innerHTML += "<span class='valid'>eamil["+val+"]合法</span><br>";
	}
	
	return false;
}

</script>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章