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 相关文章推荐
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
jquery获取tagName再进行判断
May 29 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
angular中的cookie读写方法
Aug 02 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
三个python爬虫项目实例代码
2019/12/28 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
为什么要使用servlet
2016/01/17 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
双方协议书
2014/04/22 职场文书
安全目标责任书
2014/07/22 职场文书
责任书格式范文
2014/07/28 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫