表单验证概述
2015-07-07 23:10
253 查看
//对于检查用户输入的错误和遗漏的必选项，JavaScript是一种十分便捷的方法
Javascript的最大特点之一是它能够处理表单，评估用户输入数据的有效性。这时的有效性检查在浏览器运行的客户机上完成，具有速度快、效率高的特点。
表单的验证原理：JS验证，由于验证数据不需要提交给服务器，就不会加重服务器的负载。若是验证通过则提交服务器处理，不成功则反馈给用户
//输入框text验证模板：
验证不能为空
<html>
<head>
<title></title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
//构建一个长度和文本框个数相同的数组
var checkForms=new Array("email","pwd");
//依次判断每个文本框
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
//提示输入
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get" onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center"><h3>邮箱登录</h3></caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" id="submit"
value="提交">
<input type="reset" name="reset" id="reset"
value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//下拉列表select验证模板：
验证是否选择
<html>
<head>
<title>your's birthday</title>
<script type="text/javascript">
function checkForm(form){
var year = form.year;
var month = form.month;
var day = form.day;
//判断年、月、日是否选中
if(year.value == ""){
alert("请选择出生年份!");
year.focus();
return false;
}else if(month.value == ""){
alert("请选择出生月份!");
month.focus();
return false;
}else if(day.value == ""){
alert("请选择出生于几号!");
day.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<!—-提交表单时验证检查表单-->
<form action="" method="get" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
<caption align="center"><h3>your's birthday</h3></caption>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="">-</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>年
<select name="month">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="...">...</option>
</select>日
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//单选radio按钮验证模板：
验证必须且只能选择一项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var radio=form.vote;
var flag = false;
//依次判断每个单选按钮
for(var i=0;i<radio.length;i++){
//如果单选按钮被选中，显示内容
if(radio[i].checked){
flag = true;
alert("你认为"+radio[i].value+"会被淘汰");
}
}
//没有单选按钮被选中，提示选择
if(flag == false){
alert("请选择一个如果被淘汰会让你感到意外的选手!");
return false;
}
return true;
}
</script>
</head>
<body>
<!--提交表单时判断-->
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
对于决赛第二场的结果，哪个选手被淘汰让您觉得意外？
</caption>
<tr>
<td>
<input type="radio" name="vote" value="刘美含" />刘美含
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="程晨" />程晨
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="扬梓" />扬梓
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="王志心" />王志心
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="大春子" />大春子
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//复选框checkbox验证模板：
验证用户必须选择一个或多个选项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var vote=form.vote;
var flag = false;
var voteStr = "";//投票结果
for(var i=0;i<vote.length;i++){
if(vote[i].checked) {
voteStr += vote[i].value + " ";
flag = true;
}
}
if(flag == false){
alert("请选择您认为能在下一场比赛中晋级的选手!");
return false;
}
alert("您觉得全国10强里选手能在下一场比赛中晋级的有:"+voteStr);
return true;
}
</script>
</head>
<body>
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
全国10强里哪几位选手能在下一场比赛中晋级？
</caption>
<tr>
<td>
<input type="checkbox" name="vote" value="郁可唯" />郁可唯
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="李霄云" />李霄云
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="刘惜君" />刘惜君
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘辰" />潘辰
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘虹樾" />潘虹樾
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 江映蓉" />江映蓉
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="曾轶可" />曾轶可
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="谈莉娜" />谈莉娜
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 李媛希" />李媛希
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="黄英" />黄英
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Submit2" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//邮件地址验证模板：
验证邮箱地址不为空且必须包含“@”和“.”符号
<html>
<head>
<title>邮箱登录</title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
var checkForms=new Array("email","pwd");
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
var email = form.email;//得到邮箱对象
var atIndex = email.value.indexOf("@");//取得“@”的索引
var dotIndex = email.value.indexOf(".");//取得“.”的索引
//判断邮箱中特殊符号位置
if(atIndex == -1 || dotIndex == -1){
alert("邮件地址格式不正确，请重新输入!");
email.focus();//邮箱文本框聚焦
email.select();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get"
onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center">
<h3>邮箱登录</h3>
</caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//对于检查用户输入的错误和遗漏的必选项，JavaScript是一种十分便捷的方法
Javascript的最大特点之一是它能够处理表单，评估用户输入数据的有效性。这时的有效性检查在浏览器运行的客户机上完成，具有速度快、效率高的特点。
表单的验证原理：JS验证，由于验证数据不需要提交给服务器，就不会加重服务器的负载。若是验证通过则提交服务器处理，不成功则反馈给用户
*
验证常用事件：
//输入框text验证模板：
验证不能为空
<html>
<head>
<title></title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
//构建一个长度和文本框个数相同的数组
var checkForms=new Array("email","pwd");
//依次判断每个文本框
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
//提示输入
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get" onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center"><h3>邮箱登录</h3></caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" id="submit"
value="提交">
<input type="reset" name="reset" id="reset"
value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//下拉列表select验证模板：
验证是否选择
<html>
<head>
<title>your's birthday</title>
<script type="text/javascript">
function checkForm(form){
var year = form.year;
var month = form.month;
var day = form.day;
//判断年、月、日是否选中
if(year.value == ""){
alert("请选择出生年份!");
year.focus();
return false;
}else if(month.value == ""){
alert("请选择出生月份!");
month.focus();
return false;
}else if(day.value == ""){
alert("请选择出生于几号!");
day.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<!—-提交表单时验证检查表单-->
<form action="" method="get" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
<caption align="center"><h3>your's birthday</h3></caption>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="">-</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>年
<select name="month">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="...">...</option>
</select>日
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//单选radio按钮验证模板：
验证必须且只能选择一项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var radio=form.vote;
var flag = false;
//依次判断每个单选按钮
for(var i=0;i<radio.length;i++){
//如果单选按钮被选中，显示内容
if(radio[i].checked){
flag = true;
alert("你认为"+radio[i].value+"会被淘汰");
}
}
//没有单选按钮被选中，提示选择
if(flag == false){
alert("请选择一个如果被淘汰会让你感到意外的选手!");
return false;
}
return true;
}
</script>
</head>
<body>
<!--提交表单时判断-->
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
对于决赛第二场的结果，哪个选手被淘汰让您觉得意外？
</caption>
<tr>
<td>
<input type="radio" name="vote" value="刘美含" />刘美含
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="程晨" />程晨
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="扬梓" />扬梓
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="王志心" />王志心
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="大春子" />大春子
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//复选框checkbox验证模板：
验证用户必须选择一个或多个选项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var vote=form.vote;
var flag = false;
var voteStr = "";//投票结果
for(var i=0;i<vote.length;i++){
if(vote[i].checked) {
voteStr += vote[i].value + " ";
flag = true;
}
}
if(flag == false){
alert("请选择您认为能在下一场比赛中晋级的选手!");
return false;
}
alert("您觉得全国10强里选手能在下一场比赛中晋级的有:"+voteStr);
return true;
}
</script>
</head>
<body>
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
全国10强里哪几位选手能在下一场比赛中晋级？
</caption>
<tr>
<td>
<input type="checkbox" name="vote" value="郁可唯" />郁可唯
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="李霄云" />李霄云
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="刘惜君" />刘惜君
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘辰" />潘辰
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘虹樾" />潘虹樾
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 江映蓉" />江映蓉
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="曾轶可" />曾轶可
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="谈莉娜" />谈莉娜
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 李媛希" />李媛希
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="黄英" />黄英
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Submit2" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//邮件地址验证模板：
验证邮箱地址不为空且必须包含“@”和“.”符号
<html>
<head>
<title>邮箱登录</title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
var checkForms=new Array("email","pwd");
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
var email = form.email;//得到邮箱对象
var atIndex = email.value.indexOf("@");//取得“@”的索引
var dotIndex = email.value.indexOf(".");//取得“.”的索引
//判断邮箱中特殊符号位置
if(atIndex == -1 || dotIndex == -1){
alert("邮件地址格式不正确，请重新输入!");
email.focus();//邮箱文本框聚焦
email.select();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get"
onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center">
<h3>邮箱登录</h3>
</caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript的最大特点之一是它能够处理表单，评估用户输入数据的有效性。这时的有效性检查在浏览器运行的客户机上完成，具有速度快、效率高的特点。
表单的验证原理：JS验证，由于验证数据不需要提交给服务器，就不会加重服务器的负载。若是验证通过则提交服务器处理，不成功则反馈给用户
//输入框text验证模板：
验证不能为空
<html>
<head>
<title></title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
//构建一个长度和文本框个数相同的数组
var checkForms=new Array("email","pwd");
//依次判断每个文本框
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
//提示输入
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get" onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center"><h3>邮箱登录</h3></caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" id="submit"
value="提交">
<input type="reset" name="reset" id="reset"
value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//下拉列表select验证模板：
验证是否选择
<html>
<head>
<title>your's birthday</title>
<script type="text/javascript">
function checkForm(form){
var year = form.year;
var month = form.month;
var day = form.day;
//判断年、月、日是否选中
if(year.value == ""){
alert("请选择出生年份!");
year.focus();
return false;
}else if(month.value == ""){
alert("请选择出生月份!");
month.focus();
return false;
}else if(day.value == ""){
alert("请选择出生于几号!");
day.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<!—-提交表单时验证检查表单-->
<form action="" method="get" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
<caption align="center"><h3>your's birthday</h3></caption>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="">-</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>年
<select name="month">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="...">...</option>
</select>日
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//单选radio按钮验证模板：
验证必须且只能选择一项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var radio=form.vote;
var flag = false;
//依次判断每个单选按钮
for(var i=0;i<radio.length;i++){
//如果单选按钮被选中，显示内容
if(radio[i].checked){
flag = true;
alert("你认为"+radio[i].value+"会被淘汰");
}
}
//没有单选按钮被选中，提示选择
if(flag == false){
alert("请选择一个如果被淘汰会让你感到意外的选手!");
return false;
}
return true;
}
</script>
</head>
<body>
<!--提交表单时判断-->
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
对于决赛第二场的结果，哪个选手被淘汰让您觉得意外？
</caption>
<tr>
<td>
<input type="radio" name="vote" value="刘美含" />刘美含
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="程晨" />程晨
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="扬梓" />扬梓
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="王志心" />王志心
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="大春子" />大春子
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//复选框checkbox验证模板：
验证用户必须选择一个或多个选项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var vote=form.vote;
var flag = false;
var voteStr = "";//投票结果
for(var i=0;i<vote.length;i++){
if(vote[i].checked) {
voteStr += vote[i].value + " ";
flag = true;
}
}
if(flag == false){
alert("请选择您认为能在下一场比赛中晋级的选手!");
return false;
}
alert("您觉得全国10强里选手能在下一场比赛中晋级的有:"+voteStr);
return true;
}
</script>
</head>
<body>
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
全国10强里哪几位选手能在下一场比赛中晋级？
</caption>
<tr>
<td>
<input type="checkbox" name="vote" value="郁可唯" />郁可唯
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="李霄云" />李霄云
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="刘惜君" />刘惜君
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘辰" />潘辰
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘虹樾" />潘虹樾
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 江映蓉" />江映蓉
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="曾轶可" />曾轶可
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="谈莉娜" />谈莉娜
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 李媛希" />李媛希
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="黄英" />黄英
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Submit2" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//邮件地址验证模板：
验证邮箱地址不为空且必须包含“@”和“.”符号
<html>
<head>
<title>邮箱登录</title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
var checkForms=new Array("email","pwd");
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
var email = form.email;//得到邮箱对象
var atIndex = email.value.indexOf("@");//取得“@”的索引
var dotIndex = email.value.indexOf(".");//取得“.”的索引
//判断邮箱中特殊符号位置
if(atIndex == -1 || dotIndex == -1){
alert("邮件地址格式不正确，请重新输入!");
email.focus();//邮箱文本框聚焦
email.select();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get"
onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center">
<h3>邮箱登录</h3>
</caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//对于检查用户输入的错误和遗漏的必选项，JavaScript是一种十分便捷的方法
Javascript的最大特点之一是它能够处理表单，评估用户输入数据的有效性。这时的有效性检查在浏览器运行的客户机上完成，具有速度快、效率高的特点。
表单的验证原理：JS验证，由于验证数据不需要提交给服务器，就不会加重服务器的负载。若是验证通过则提交服务器处理，不成功则反馈给用户
*
验证常用事件：
//输入框text验证模板：
验证不能为空
<html>
<head>
<title></title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
//构建一个长度和文本框个数相同的数组
var checkForms=new Array("email","pwd");
//依次判断每个文本框
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
//提示输入
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get" onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center"><h3>邮箱登录</h3></caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" id="submit"
value="提交">
<input type="reset" name="reset" id="reset"
value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//下拉列表select验证模板：
验证是否选择
<html>
<head>
<title>your's birthday</title>
<script type="text/javascript">
function checkForm(form){
var year = form.year;
var month = form.month;
var day = form.day;
//判断年、月、日是否选中
if(year.value == ""){
alert("请选择出生年份!");
year.focus();
return false;
}else if(month.value == ""){
alert("请选择出生月份!");
month.focus();
return false;
}else if(day.value == ""){
alert("请选择出生于几号!");
day.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<!—-提交表单时验证检查表单-->
<form action="" method="get" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
<caption align="center"><h3>your's birthday</h3></caption>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="">-</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>年
<select name="month">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day">
<option value="">-</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="...">...</option>
</select>日
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//单选radio按钮验证模板：
验证必须且只能选择一项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var radio=form.vote;
var flag = false;
//依次判断每个单选按钮
for(var i=0;i<radio.length;i++){
//如果单选按钮被选中，显示内容
if(radio[i].checked){
flag = true;
alert("你认为"+radio[i].value+"会被淘汰");
}
}
//没有单选按钮被选中，提示选择
if(flag == false){
alert("请选择一个如果被淘汰会让你感到意外的选手!");
return false;
}
return true;
}
</script>
</head>
<body>
<!--提交表单时判断-->
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
对于决赛第二场的结果，哪个选手被淘汰让您觉得意外？
</caption>
<tr>
<td>
<input type="radio" name="vote" value="刘美含" />刘美含
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="程晨" />程晨
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="扬梓" />扬梓
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="王志心" />王志心
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="vote" value="大春子" />大春子
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//复选框checkbox验证模板：
验证用户必须选择一个或多个选项
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(form){
var vote=form.vote;
var flag = false;
var voteStr = "";//投票结果
for(var i=0;i<vote.length;i++){
if(vote[i].checked) {
voteStr += vote[i].value + " ";
flag = true;
}
}
if(flag == false){
alert("请选择您认为能在下一场比赛中晋级的选手!");
return false;
}
alert("您觉得全国10强里选手能在下一场比赛中晋级的有:"+voteStr);
return true;
}
</script>
</head>
<body>
<form action="" id="myform" name="myform" onsubmit="return checkForm(this)">
<table width="500" align="center" style="border:1px solid #FF9966"
cellspacing="0" cellpadding="0">
<caption align="center">
全国10强里哪几位选手能在下一场比赛中晋级？
</caption>
<tr>
<td>
<input type="checkbox" name="vote" value="郁可唯" />郁可唯
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="李霄云" />李霄云
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="刘惜君" />刘惜君
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘辰" />潘辰
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="潘虹樾" />潘虹樾
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 江映蓉" />江映蓉
</td>
<td>
<img src="5.jpg" width="265" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="曾轶可" />曾轶可
</td>
<td>
<img src="3.jpg" width="259" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="谈莉娜" />谈莉娜
</td>
<td>
<img src="4.jpg" width="264" height="15" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value=" 李媛希" />李媛希
</td>
<td>
<img src="2.jpg" width="268" height="14" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vote" value="黄英" />黄英
</td>
<td>
<img src="1.jpg" width="261" height="15" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Submit2" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
//邮件地址验证模板：
验证邮箱地址不为空且必须包含“@”和“.”符号
<html>
<head>
<title>邮箱登录</title>
<script type="text/javascript">
//验证不能为空的字段
function checkForm(form){
var checkForms=new Array("email","pwd");
for(var i=0;i<checkForms.length;i++){
if(form.elements[checkForms[i]].value == ""){//如果为空
alert("请输入 \"" + form.elements[checkForms[i]].title
+ " \" !");
form.elements[checkForms[i]].focus();//鼠标聚焦
return false;
}
}
var email = form.email;//得到邮箱对象
var atIndex = email.value.indexOf("@");//取得“@”的索引
var dotIndex = email.value.indexOf(".");//取得“.”的索引
//判断邮箱中特殊符号位置
if(atIndex == -1 || dotIndex == -1){
alert("邮件地址格式不正确，请重新输入!");
email.focus();//邮箱文本框聚焦
email.select();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="get"
onsubmit="return checkForm(this)">
<table bgcolor="#FFCC66" width="400" align="center"
style="border:1px solid" bordercolor="#0033CC"
cellpadding="1" cellspacing="1">
<caption align="center">
<h3>邮箱登录</h3>
</caption>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="email" id="email" title="邮箱" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="pwd" id="pwd" title="密码" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- JSP/PHP基于Ajax的分页功能实现
- javascript实现10进制转为N进制数
- 氪周刊：关注互联网创业
- 据说程序员才会看懂的趣图……
- 开发阶段Jetty运行Jsp报错且响应空白
- 2019年开发人员应该学习的8个JavaScript框架
- 数据中心和云未来的十二大趋势
- 《互联网运营智慧》十一月进展
- HTML中的script标签研究
- 异步流程控制：7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因