纯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 相关文章推荐
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
js onclick事件传参讲解
Nov 06 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
javascript实现倒计时效果
Feb 17 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
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
关于js与php互相传值的介绍
2013/06/25 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
JavaScript触发器详解
2007/03/10 Javascript
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python3实现转换Image图片格式
2018/06/21 Python
有关Python的22个编程技巧
2018/08/29 Python
python破解同事的压缩包密码
2020/10/14 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
自我评价200字分享
2013/12/17 职场文书
小学教师节活动方案
2014/01/31 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python