表单验证概述

原创 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>

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

相关文章推荐

Validform前端表单验证

  • 2017-09-15 17:21
  • 268KB
  • 下载

AngularJS 的表单验证(转)

AngularJS 的表单验证 今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:Angular...

表单验证特效

  • 2016-04-06 22:20
  • 720B
  • 下载

jquery 表单验证

  • 2016-01-05 22:42
  • 268KB
  • 下载

用angular做表单验证

先上图 看到红色箭头所示,有注意两点: 当文本框获得焦点的时候,有一个box-shadow的效果 同时会有验证 都知道input是单标签(不闭合)的元素,为了实现这个效果,就需要用到div将in...

Jquery 表单验证控件

  • 2015-02-28 11:14
  • 36KB
  • 下载

【JavaScript】小样例-js仿jquery的表单验证

自己写了一个仿jquery的表单验证,用的纯javascript 效果: 代码: js测试 用户名: 密码: f...

Validform 表单验证

  • 2014-12-03 21:36
  • 268KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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