纯JS实现表单验证实例


Posted in Javascript onDecember 24, 2016

表单我实现了,input属性是text(文本框)、radio(单选按钮)、checkbox(多选按钮)的知识点,

fieldset标签(组合表单中的相关元素)、select标签(选择列表)和textarea标签(多行文本框)。

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return checkForm()"> 
  <h2>学生选课基本信息</h2> 
  姓名:<input type="text" id="name" placeholder="yourname" size="20" onfocus="checkNameFocus()" onblur="checkNameBlur()"> 
  <div id="namePrompt"></div><br/> 
  学号:<input type="text" id="num" placeholder="yournum" size="20" onfocus="checkNumFocus()" onblur="checkNumBlur()"> 
  <div id="numPrompt"></div><br/> 
  性别:<label><input type="radio" name="sex" value="男" checked>男</label> 
     <label><input type="radio" name="sex" value="女">女<br/></label> 
  邮箱:<input type="text" id="email" placeholder="yourmail" size="20" onfocus="checkEmailFocus()" onblur="checkEmailBlur()"> 
  <div id="emailPrompt"></div> 
  <br/> 
  <fieldset class="classes" id="course" onchange="checkCourse()"> 
    <legend>可选课程</legend> 
    <label><input name="Class" type="checkbox" value="" />算法设计</label><br/> 
    <label><input name="Class" type="checkbox" value="" />人工智能</label><br/> 
    <label><input name="Class" type="checkbox" value="" />编译原理</label><br/> 
    <label><input name="Class" type="checkbox" value="" />机器学习</label><br/> 
    <label><input name="Class" type="checkbox" value="" />计算机网络</label> 
  </fieldset> 
  喜欢的老师:<select name="teacher"> 
    <option value="0">刘老师</option> 
    <option value="0">齐老师</option> 
    <option value="0">李老师</option> 
    <option value="0">马老师</option> 
    <option value="0">肖老师</option> 
  </select><br/> 
  还有话说:<br/> 
  <textarea id="message" name="message" placeholder="Your Message to Us" cols="50" rows="10"></textarea> 
  <br/><br/> 
  <button type="submit">提交</button> 
  <button type="reset">重置</button> 
</form>

css样式如下图:

纯JS实现表单验证实例

css这部分写的不太好,请大家批评指正。(参考的网上的一些资料,网址忘了)

*{ 
  margin-left:auto; 
  margin-right:auto; 
  max-width: 500px; 
  background: #F8F8F8; 
  padding: 10px; 
  font: 12px Arial, Helvetica, sans-serif; 
  color: #666; 
  border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
} 
body,form{ 
  padding: 15px; 
  /*width: 500px;*/ 
  background: #F4F4F4; 
} 
h2 { 
  padding-bottom:2px; 
   *padding:0; 
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; 
padding: 20px 0px 20px 40px; 
display: block; 
margin: -30px -30px 10px -30px; 
color: #FFF; 
background: #9DC45F; 
text-shadow: 1px 1px 1px #949494; 
border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
border-bottom:1px solid #89AF4C; 
} 
/*label { 
display: block; 
margin: 0px 0px 0px; 
}*/ 
 select { 
color: #555; 
height: 30px; 
line-height:12px; 
width: 30%; 
padding: 0px 0px 0px 10px; 
margin-top: 2px; 
border: 1px solid #E5E5E5; 
background: #FBFBFB; 
outline: 0; 
-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); 
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); 
font: normal 12px/12px Arial, Helvetica, sans-serif; 
} 
.classes input{ 
  vertical-align:middle;  
  margin-top:-2px;  
  margin-bottom:1px; 
  height: 35px; 
} 
textarea{ 
height:100px; 
width: 90%; 
padding-top: 10px; 
} 
button { 
background-color: #9DC45F; 
border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-border-border-radius: 5px; 
border:none; 
padding: 10px 25px 10px 25px; 
color: #FFF; 
text-shadow: 1px 1px 1px #949494; 
} 
button:hover { 
background-color:#80A24A; 
} 
#name,#num,#email{vertical-align:middle;}/*input和图片在一行*/ 
#namePrompt,#numPrompt,#emailPrompt{ 
  vertical-align:middle;/*input和图片在一行*/ 
  display: inline-block; 
  padding: 0px; 
  color: red; 
  background-color:#F4F4F4;  
} 
/*验证表单的格式*/ 
/*当鼠标放到文本框时,提示文本的样式*/ 
.import_prompt{ 
  border:solid 1px #ffcd00; 
  background-color:#ffffda; 
  } 
下来就是js表单验证了。。。。。。
这是js验证的目标。
1.当鼠标放在姓名文本框时,提示文本及样式。
2./*当鼠标离开姓名文本框时,提示文本及样式*/ 汉字 
3.当鼠标放在学号文本框时,提示文本及样式。
4./*当鼠标离开学号文本框时,提示文本及样式*/只能是数字
5.邮箱的验证,必须符合邮箱的格式。
6.表单提交时验证表单内容输入的有效性。
其中用到了正则表达式来匹配。
匹配简体中文的正则是^[\u4e00-\u9fa5]+$
匹配邮箱格式的正则是 [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
直接上代码:
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
// 通过getElementById得到相应元素 
function $(id){ 
  return document.getElementById(id); 
} 
// 当鼠标放在姓名文本框时,提示文本及样式。 
function checkNameFocus(){ 
  var userNameId=$("name"); 
  userNameId.className="import_prompt"; 
  var namePrompt=$("namePrompt"); 
  namePrompt.innerHTML="必须是汉字哦~"; 
} 
/*当鼠标离开姓名文本框时,提示文本及样式*/  
function checkNameBlur(){ 
  var namePrompt=$("namePrompt"); 
  namePrompt.innerHTML=null; 
  var reg1=/^[\u4e00-\u9fa5]+$/;//匹配简体中文的正则表达式 
  var name=$("name").value; 
  // 先查看是否为空 
  if(name==""){ 
    namePrompt.innerHTML="名字不能为空!" 
    return false; 
  } 
  else if(!reg1.test(name)){ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/false.png"; 
    trueimg.width="15"; 
    namePrompt.appendChild(trueimg); 
    return false; 
  }else{ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/true.png"; 
    trueimg.width="15"; 
    namePrompt.appendChild(trueimg); 
    return true; 
  } 
} 
//当鼠标放在学号文本框时,提示文本及样式。 
function checkNumFocus(){ 
  var studentNum=$("num"); 
  studentNum.className="import_prompt"; 
  var numPrompt=$("numPrompt"); 
  numPrompt.innerHTML="必须是0-9的10位数字哦~"; 
} 
/*当鼠标离开学号文本框时,提示文本及样式*/ 
function checkNumBlur(){ 
  var numPrompt=$("numPrompt"); 
  numPrompt.innerHTML=null; 
  var reg2=/^\d{10}$/; 
  var xuehao=$("num").value; 
  //先验证是否为空 
  if(xuehao==""){ 
    numPrompt.innerHTML="学号不能为空!"; 
    return false; 
  } 
  else if(!reg2.test($("num").value)){//好奇怪,使用变量就变成空的了,在外边就有值。 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/false.png"; 
    trueimg.width="15"; 
    numPrompt.appendChild(trueimg); 
    return false; 
  } 
  else{ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/true.png"; 
    trueimg.width="15"; 
    numPrompt.appendChild(trueimg); 
    return true; 
  } 
} 
//邮箱的验证,必须符合邮箱的格式。 
function checkEmailFocus(){ 
  var email=$("email"); 
  email.className="import_prompt"; 
  var emailPrompt=$("emailPrompt"); 
  emailPrompt.innerHTML="请输入您常用的电子邮箱"; 
} 
function checkEmailBlur(){ 
  var emailPro=$("emailPrompt");; 
  emailPrompt.innerHTML=null; 
  var emailValue=$("email").value; 
  var reg3=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
  //先验证是否为空 
  if(emailValue==""){ 
    emailPrompt.innerHTML="邮箱不能为空!"; 
    return false; 
  } 
  else if(!reg3.test(emailValue)){ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/false.png"; 
    trueimg.width="15"; 
    emailPrompt.appendChild(trueimg); 
    return false; 
  } 
  else{ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/true.png"; 
    trueimg.width="15"; 
    emailPrompt.appendChild(trueimg); 
    return true; 
  } 
} 
//验证复选框 
function checkCourse(){  
  var courses=$("course"); 
  var cbs = courses.getElementsByTagName("input");  
  var b = false;  
  for(var i=0;i<cbs.length;i++){  
    if(cbs[i].type == "checkbox" && cbs[i].checked){  
      b = true;  
    }  
  }  
  if(!b){  
    alert("请至少选择一门课程!!!");  
    return false;  
  }  
}  
//表单提交时验证表单内容输入的有效性 
function checkForm(){ 
   var flagName=checkNameBlur(); 
   var flagNum=checkNumBlur(); 
   var flagEmail=checkEmailBlur(); 
   var flagCourse=checkCourse(); 
   if(flagName==true &&flagNum==true &&flagEmail==true &&flagCourse==true){ 
     return true; 
    } 
    else{ 
      return false; 
     }   
  }

以上所述是小编给大家介绍的纯JS实现表单验证实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 #Javascript
JS绘制微信小程序画布时钟
Dec 24 #Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 #Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 #Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 #Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 #Javascript
Bootstrap php制作动态分页标签
Dec 23 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
php+dbfile开发小型留言本
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php接口技术实例详解
2016/12/07 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python验证码识别的示例代码
2017/09/21 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
汽车驾驶求职信
2013/10/25 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
事业单位接收函
2014/01/10 职场文书
运动会广播稿100字
2014/01/11 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
反邪教观后感
2015/06/11 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers