纯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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 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
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
详解python 中in 的 用法
2019/12/12 Python
Python函数生成器原理及使用详解
2020/03/12 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
党员一句话承诺大全
2014/03/28 职场文书
校园演讲稿汇总
2014/05/21 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
调研报告的主要写法
2019/04/18 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL