html+javascript實現表單前臺驗證
阿新 • • 發佈：2019-02-08
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function onCheck()
{
if((form1.username==null||form1.username.value=="")&&(form1.password==null||form1.password.value==""))
{
alert("使用者名稱，密碼都不能為空");
return false;
}
if(form1.username==null||form1.username.value=="")
{
alert("使用者名稱不能為空");
return false;
}
if(form1.password==null||form1.password.value=="")
{
alert("密碼不能為空");
return false;
}
else
return true;
}
</script>
</head>
<body>
<form name="form1" action="test.html" method="post">
<table border="1" align="center">
<tr>
<td colspan="2" align="center">使用者登錄檔單</td>
</tr>
<tr>
<td align="right">使用者名稱:</td>
<td align="left"><input type="text" size="20" name="username"/>*</td>
</tr>
<tr>
<td align="right">密 碼:</td>
<td align="left"><input type="password" size="20" name="password"/>*</td>
</tr>
<tr>
<td align="right">性 別:</td>
<td align="left"><input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td align="right">愛 好:</td>
<td align="left">
<input type="checkbox" name="favor" value="看書"/>看書
<input type="checkbox" name="favor" value="程式設計"/>程式設計
<input type="checkbox" name="favor" value="打球"/>打球
</td>
</tr>
<tr>
<td align="right">學習方向</td>
<td><select name="direaction" multiple size="4">
<option value="1">Android方向</option>
<option value="2">IOS方向</option>
<option value="3">Windows方向</option>
<option value="4">Web方向</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" onclick="return onCheck()"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>form.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function onCheck()
{
if((form1.username==null||form1.username.value=="")&&(form1.password==null||form1.password.value==""))
{
alert("使用者名稱，密碼都不能為空");
return false;
}
if(form1.username==null||form1.username.value=="")
{
alert("使用者名稱不能為空");
return false;
}
if(form1.password==null||form1.password.value=="")
{
alert("密碼不能為空");
return false;
}
else
return true;
}
</script>
</head>
<body>
<form name="form1" action="test.html" method="post">
<table border="1" align="center">
<tr>
<td colspan="2" align="center">使用者登錄檔單</td>
</tr>
<tr>
<td align="right">使用者名稱:</td>
<td align="left"><input type="text" size="20" name="username"/>*</td>
</tr>
<tr>
<td align="right">密 碼:</td>
<td align="left"><input type="password" size="20" name="password"/>*</td>
</tr>
<tr>
<td align="right">性 別:</td>
<td align="left"><input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td align="right">愛 好:</td>
<td align="left">
<input type="checkbox" name="favor" value="看書"/>看書
<input type="checkbox" name="favor" value="程式設計"/>程式設計
<input type="checkbox" name="favor" value="打球"/>打球
</td>
</tr>
<tr>
<td align="right">學習方向</td>
<td><select name="direaction" multiple size="4">
<option value="1">Android方向</option>
<option value="2">IOS方向</option>
<option value="3">Windows方向</option>
<option value="4">Web方向</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" onclick="return onCheck()"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>