<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>注冊頁面</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?
?? ??? ??? ?.left{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?text-align: right;
?? ??? ??? ?}
?? ??? ??? ?.right{
?? ??? ??? ??? ?width: 800px;
?? ??? ??? ?}
?? ??? ??? ?.input{
?? ??? ??? ??? ?width: 400px;
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script>
//?? ??? ??? ?獲得焦點時?? ??? ??? ??? ?定義兩個形參 info是指為span標簽添加的內容
?? ??? ??? ?function showTips(id,info){
//?? ??? ??? ??? ?找到id+"span"標簽 在其內加入<font color='red'>info</font>
?? ??? ??? ??? ?document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
?? ??? ??? ?}
//?? ??? ??? ?失去焦點時
?? ??? ??? ?function check(id,info){
//?? ??? ??? ??? ?定義一個變量? 獲得id標簽內的內容
?? ??? ??? ??? ?var content=document.getElementById(id).value;
?? ??? ??? ??? ?if(content==""){
//?? ??? ??? ??? ??? ?如果獲得的內容為空 為后邊span標簽添加info 提示用戶
?? ??? ??? ??? ??? ?document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
?? ??? ??? ??? ?}else{
//?? ??? ??? ??? ??? ?如果不為空? 就把空字符串給span添加? 顯示不出來
?? ??? ??? ??? ??? ?document.getElementById(id+"span").innerHTML="";
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<!--確定事件并綁定函數-->
?? ??? ?<form action="#" method="post" name="longFrom" οnsubmit="checkFrom()">
?? ??? ??? ?<table border="0" align="center" cellpadding="0" cellspacing="50">
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="left">用戶名</td>
?? ??? ??? ??? ??? ?<td class="right">
?? ??? ??? ??? ??? ??? ?<input type="text" class="input" id="user" οnfοcus="showTips('user','用戶名必填')" οnblur="check('user','用戶名不能為空')"/><span id="userspan"></span>
?? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="left">密碼</td>
?? ??? ??? ??? ??? ?<td class="right">
?? ??? ??? ??? ??? ??? ?<input type="password" class="input" id="pas" οnfοcus="showTips('pas','用戶名必填')" οnblur="check('pas','用戶名不能為空')"/><span id="passpan"></span>
?? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="left">確認密碼</td>
?? ??? ??? ??? ??? ?<td class="right">
?? ??? ??? ??? ??? ??? ?<input type="password" class="input" id="repas" οnfοcus="showTips('repas','用戶名必填')" οnblur="check('repas','用戶名不能為空')"/><span id="repasspan"></span>
?? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td class="left"></td>
?? ??? ??? ??? ??? ?<td class="right">
?? ??? ??? ??? ??? ??? ?<input type="submit" value="提交" style="padding: 10px;"/>
?? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</table>
?? ??? ??? ?
?? ??? ?</form>
?? ??? ?
?? ?</body>
</html>
轉載于:https://www.cnblogs.com/bxl-1016/p/10458842.html
)