表单验证概述

原创 2015年07月07日 23:10:40


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

版权声明:本文为博主原创文章,未经博主允许不得转载。

ThinkPHP-2-链接mysql+表单验证

  • 2017年07月16日 14:12
  • 2MB
  • 下载

强大的表单验证库

  • 2014年11月10日 17:37
  • 5.52MB
  • 下载

Spring MVC 表单验证

Spring 表单验证从Spring3.0开始,在Spring API 中提供了对java校验API的支持.在Spring MVC 中要使用java校验API的话,并不需要而外的配置,只要保证在类路径...

很好用的表单验证

  • 2017年02月06日 10:07
  • 5KB
  • 下载

极漂亮的表单验证小弹框

  • 2016年01月13日 13:56
  • 7KB
  • 下载

PHP常用(正则)表单验证类

这些天一直在整理项目,就把一些常用的总结了一下. 验证是否为指定长度的字母/数字组合 验证是否为指定长度数字 验证是否为指定长度汉字 验证身份证号码 验证手机号 验证邮件地址 验证邮编 验证URL地...
  • YBaog
  • YBaog
  • 2017年12月07日 10:41
  • 5

js表单验证类2015

  • 2015年10月22日 14:00
  • 26KB
  • 下载

表单验证方法

  • 2015年07月29日 09:05
  • 145KB
  • 下载

easyUI之表单验证validate

文本框校验,在easyUI的表单提交中,最常见的就是对文本框的校验,不同类型的输入项需要不同的校验类型,用户可以使用自带的验证类型也可以进行自定义。 1、普通文本框的非空校验 其中class属性为必...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表单验证概述
举报原因:
原因补充:

(最多只允许输入30个字)