JavaScript表单验证完美代码


Posted in Javascript onMarch 02, 2017

用原生JS写一个简单的表单验证

 首先,是html部分

<div class="divAll"> 
   <div id="titles">新用户注册</div> 
   <div id="contents"> 
   <h3>基本信息</h3> 
   <hr width="95%" color="#f2f2f2"/> 
   <form action="#" onSubmit="return checkForm()"> 
    <div id="form-itemGroup"> 
      <label for="userName">用户名:</label> 
      <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> 
      <span class="default" id="nameErr">请输入至少3位的用户名</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userPasword">密码:</label> 
      <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> 
      <span class="default" id="passwordErr">请输入4到8位的密码</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userConfirmPasword">确认密码:</label> 
      <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> 
      <span class="default" id="conPasswordErr">请再输入一遍密码</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userPhone">手机号码:</label> 
      <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> 
      <span class="default" id="phoneErr">请输入11位手机号码</span> 
    </div> 
    <div> 
     <button type="submit" class="divBtn">注册</button> 
    </div> 
   </form> 
   </div> 
 </div>

 接着,为其加上CSS样式

<style type="text/css"> 
 .divAll{ 
   width:800px; 
   font-family:'黑体'; 
   margin:50px auto; 
   } 
 #titles{ 
   font-weight:bold; 
   font-size:18px; 
   height:50px; 
   line-height:50px; 
   background:#FFF9F3; 
   text-align:center;  
   border:1px solid #CCC;; 
   } 
 #contents{ 
    margin-top:20px; 
    background:#FFF9F3; 
    border:1px solid #CCC;; 
    } 
  #form-itemGroup{ 
   padding:10px;  
    } 
  #form-itemGroup label{ 
    display:inline-block; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    color:#666; 
    text-align:right; 
    } 
  #form-itemGroup .userName{ 
    width:200px; 
    height:40px; 
    line-height:40px; 
    border:1px solid #CCC; 
    }   
  #form-itemGroup .default{ 
    width:200px; 
    height:32px; 
    line-height:32px; 
    color:#999; 
    }  
  #form-itemGroup .error{ 
    height:32px; 
    line-height:32px; 
    color:#F00; 
    } 
  #form-itemGroup .success{ 
    height:32px; 
    line-height:32px; 
    color:#096; 
    }  
  .divBtn{ 
    margin-top:20px; 
    margin-left:200px; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    background-color:#F93; 
    margin-bottom:10px; 
    color:#ffffff; 
    font-weight:bold; 
    border:none; 
    } 
</style>

最后是JS部分

<script type="text/javascript"> 
 function checkForm(){ 
  var nametip = checkUserName(); 
  var passtip = checkPassword();  
  var conpasstip = ConfirmPassword(); 
  var phonetip = checkPhone(); 
  return nametip && passtip && conpasstip && phonetip; 
  } 
  //验证用户名   
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{3,}$/;  //用户名格式正则表达式:用户名要至少三位 
  if(username.value.length == 0){ 
    errname.innerHTML="用户名不能为空" 
    errname.className="error" 
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="用户名不合规范" 
    errname.className="error" 
    return false; 
    } 
   else{ 
     errname.innerHTML="OK" 
     errname.className="success"; 
     return true; 
     } 
  } 
  //验证密码   
function checkPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var errPasswd = document.getElementById('passwordErr'); 
  var pattern = /^\w{4,8}$/; //密码要在4-8位 
  if(!pattern.test(userpasswd.value)){ 
    errPasswd.innerHTML="密码不合规范" 
    errPasswd.className="error" 
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK" 
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //确认密码 
  function ConfirmPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var userConPassword = document.getElementById('userConfirmPasword'); 
  var errConPasswd = document.getElementById('conPasswordErr'); 
  if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ 
    errConPasswd.innerHTML="上下密码不一致" 
    errConPasswd.className="error" 
    return false; 
    } 
   else{ 
     errConPasswd.innerHTML="OK" 
     errConPasswd.className="success"; 
     return true; 
     }    
  } 
//验证手机号 
  function checkPhone(){ 
  var userphone = document.getElementById('userPhone'); 
  var phonrErr = document.getElementById('phoneErr'); 
  var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 
  if(!pattern.test(userphone.value)){ 
    phonrErr.innerHTML="手机号码不合规范" 
    phonrErr.className="error" 
    return false; 
    } 
   else{ 
     phonrErr.innerHTML="OK" 
     phonrErr.className="success"; 
     return true; 
     } 
  } 
</script>

 好了,打开浏览器测试一下吧

JavaScript表单验证完美代码

  填写数据,可以!

JavaScript表单验证完美代码

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

Javascript 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
js实现常见的工具条效果
Mar 02 #Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
jQuery给表格添加分页效果
Mar 02 #Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 #Javascript
Bootstrap Scrollspy源码学习
Mar 02 #Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 #Javascript
jQuery实用密码强度检测
Mar 02 #Javascript
You might like
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php自动加载机制的深入分析
2013/06/08 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
jquery中filter方法用法实例分析
2015/02/06 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
初学Python实用技巧两则
2014/08/29 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python 常用的基础函数
2018/07/10 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
酒店应聘自荐信
2013/11/09 职场文书
代理班主任的自我评价
2014/02/04 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
党的作风建设心得体会
2014/10/22 职场文书
倡议书作文
2015/01/19 职场文书
人事局接收函
2015/01/30 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python