轻云流火 chitry

你永远不知道未来的你有多强

表单验证概述



//对于检查用户输入的错误和遗漏的必选项,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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29025139/article/details/46795771
文章标签: JSP javascript 互联网
个人分类: Web启示录 [基础篇]
想对作者说点什么? 我来说一句

validformv1.0

2011年07月05日 24KB 下载

web开发基础_JavaScript

2010年01月20日 2.79MB 下载

jQuery表单验证大全

2009年11月17日 73KB 下载

jquery验证测试

2011年05月04日 8.12MB 下载

EXT 表单验证EXT 表单验证

2011年08月22日 360KB 下载

js表单验证s表单验证s表单验证

2011年06月01日 13KB 下载

stuts表单验证。还成吧

2008年09月17日 12KB 下载

表单验证大全表单验证大全

2008年12月30日 94KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭