<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{color: red;font-size: 12px;display: none;}
</style>
<script type="text/javascript">
/*
表單提交:
from 表單
action 目標頁面的url 當提交成功時,跳轉的目標頁面
method get post 網絡提交方式
例如:get sucess.html?username='lili'&pwd='1231'
post sucess.html
submit 提交
onsubmit return 語句; 若返回值爲true或者 "" 均可以提交
表單校驗:
*/
</script>
</head>
<body>
<form action="sucess.html" method="post" onsubmit="return valForm()">
用戶名:<input type="text" id="txt-name"><span id="tip-name">用戶名必須爲8-12爲字母或數字</span><br>
密碼:<input type="password" id="pwd"><span id="tip-pwd">密碼必須爲6位數字</span><br>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
//校驗用戶名密碼是否合法
var iptName=document.getElementById('txt-name');
var iptPwd=document.getElementById('pwd');
var tipName=document.getElementById('tip-name');
var tipPwd=document.getElementById('tip-pwd');
//對用戶名和密碼進行校驗
function valForm(){
return valUserName()&&valPwd();
}
//校驗用戶名
function valUserName() {
var p=/^\w\w{7,11}$/;//用戶名必須爲8-12爲字母或數字
var r=p.test(iptName.value);//校驗
if(!r){
//校驗不通過
tipName.style.display='inline-block';//顯示
iptName.focus();
return false;
}
return true;
}
//校驗密碼
function valPwd(){
var p=/^\d\d{5}$/;//6位數字
var r=p.test(iptPwd.value);//校驗
if(!r){
tipPwd.style.display='inline-block';
iptPwd.focus();//獲取焦點
return false;
}
return true;
}
</script>
</body>
</html>