js關於表單校驗完善
阿新 • • 發佈：2019-03-02
定義 nbsp wid 字符串 password var body script 確認密碼
.input{
width: 400px;
height: 30px;
}
</style>
<script>
// 獲得焦點時 定義兩個形參 info是指為span標簽添加的內容
function showTips(id,info){
// 找到id+"span"標簽 在其內加入<font color=‘red‘>info</font>
}
// 失去焦點時
function check(id,info){
// 定義一個變量 獲得id標簽內的內容
var content=document.getElementById(id).value;
if(content==""){
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" onsubmit="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" onfocus="showTips(‘user‘,‘用戶名必填‘)" onblur="check(‘user‘,‘用戶名不能為空‘)"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td class="left">密碼</td>
<td class="right">
<input type="password" class="input" id="pas" onfocus="showTips(‘pas‘,‘用戶名必填‘)" onblur="check(‘pas‘,‘用戶名不能為空‘)"/><span id="passpan"></span>
</td>
</tr>
<tr>
<td class="left">確認密碼</td>
<td class="right">
<input type="password" class="input" id="repas" onfocus="showTips(‘repas‘,‘用戶名必填‘)" onblur="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>
<!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>
}
// 失去焦點時
function check(id,info){
// 定義一個變量 獲得id標簽內的內容
var content=document.getElementById(id).value;
if(content==""){
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" onsubmit="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" onfocus="showTips(‘user‘,‘用戶名必填‘)" onblur="check(‘user‘,‘用戶名不能為空‘)"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td class="left">密碼</td>
<td class="right">
<input type="password" class="input" id="pas" onfocus="showTips(‘pas‘,‘用戶名必填‘)" onblur="check(‘pas‘,‘用戶名不能為空‘)"/><span id="passpan"></span>
</td>
</tr>
<tr>
<td class="left">確認密碼</td>
<td class="right">
<input type="password" class="input" id="repas" onfocus="showTips(‘repas‘,‘用戶名必填‘)" onblur="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>
js關於表單校驗完善