纯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 相关文章推荐
Js动态创建div
Sep 25 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
javascript随机变色实例代码
Oct 15 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
建龙钢铁面试总结
2014/04/15 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
生产部岗位职责范文
2014/02/07 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
php去除数组中为0的元素的实例分析
2021/11/17 PHP
java实现web实时消息推送的七种方案
2022/07/23 Java/Android