1. //获取下一个span,可以通过这个对象给状态
  2. function gspan(cobj){
  3. while(true){
  4. if(cobj.nextSibling.nodeName!="SPAN")//因为有可能input标签后可能有空格再接span,或者中间有其它标签,但是我们要改的是span的内容,所以要获得input对应的span;
  5. cobj=cobj.nextSibling;
  6. else
  7. return cobj.nextSibling;
  8. }
  9. }
  10.  
  11. /*
  12. 通用检查方法
  13. 第一个参数:obj, 是用来检查的对象
  14. 第二个参数:info, 是用来检查的提示信息
  15. 第三个参数: fun, 是一个回调函数,用来检查值是否按条件输入。因为一个变量不能解决判断是否value值符合要求,所以用函数作为参数。
  16. 第四个参数: click只是一个状态, 分清楚是单击提交按,还是失去焦点。因为check里面的离开焦点,在单击提交时每一个都没有离开焦点,所以不会调用check里面的离开焦点函数;
  17. */
  18. function check(obj, info, fun, click){
  19. var sp=gspan(obj);
  20. obj.onfocus=function(){ //一旦获得焦点,就要变提示信息以及颜色;
  21. sp.innerHTML=info;
  22. sp.className="stats2";//stats表示几个状态不同的字体颜色;
  23.  
  24. }
  25.  
  26. obj.onblur=function(){//一旦失去焦点,就要检查这个value值,通过fun回调函数。
  27. if(fun(this.value)){//如果符合规则,则回调函数返回真,提示信息变为“输入正确”并改变颜色;
  28. sp.innerHTML="输入正确";
  29. sp.className="stats4";
  30.  
  31. }else{
  32. sp.innerHTML=info;
  33. sp.className="stats3";
  34. }
  35. }
  36.  
  37. if(click=="click")//如果是单击提交按钮的,就手动条用onblur方法
  38. obj.onblur();
  39. }
  40.  
  41. //页面加载完自动调用
  42. onload=regs
  43.  
  44. //一个函数,可以使用onsubmit调用, 也可以使用onload调用
  45. function regs(click){
  46.  
  47. var stat=true;//因为表单是否提交要通过判断其是否通过验证,返回stat给提交事件。
  48. var username=document.getElementsByName("username")[0];
  49. var password=document.getElementsByName("password")[0];
  50. var repass=document.getElementsByName("repass")[0];
  51. var email=document.getElementsByName("email")[0];
  52. var other=document.getElementsByName("other")[0];
  53.  
  54. check(username, "用户名的长度要在3-20之间", function(val){
  55.  
  56. if(val.match(/^\S+$/) && val.length >=3 && val.length <=20){
  57. return true;
  58. }else{
  59. stat=false;
  60. return false;
  61. }
  62. }, click);
  63.  
  64. check(password, "密码必须在6-20位之间", function(val){
  65. if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){
  66. return true;
  67. }else{
  68. stat=false;
  69. return false;
  70. }
  71. }, click);
  72.  
  73. check(repass, "确定密码要和上面一致,规则也要相同", function(val){
  74. if(val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val==password.value){
  75. return true;
  76. }else{
  77. stat=false;
  78. return false;
  79. }
  80. }, click)
  81.  
  82. check(email, "要按邮箱规则输入", function(val){
  83. if(val.match(/\w+@\w+\.\w/)){
  84. return true;
  85. }else{
  86. stat=false;
  87. return false;
  88. }
  89. }, click)
  90.  
  91. return stat;
  92. }

表单验证-JS实现的更多相关文章

  1. 表单验证—js循环所有表单验证

    [封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...

  2. 最常用的15个前端表单验证JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  3. 简单的表单验证(js、jquery)

    //javascript代码 function valForm(){ var username=document.getElementById("username"); var p ...

  4. 一个自己实现的js表单验证框架。

    经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求.最 ...

  5. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  6. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  7. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  8. jqury表单验证

    结合天天生鲜的用户注册页面,学习验证表单js register.js--表单验证源码 $(function(){ var error_name = false; var error_password ...

  9. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

随机推荐

  1. 将方法定义在prototype上的好处

    通常js类定义和使用的是这样的: var Class=function(){}; Class.prototype.sharedFn=function(){}; var instanceA=new Cl ...

  2. an open source web server and reverse proxy

    https://www.nginx.com/resources/admin-guide/ NGINX is an open source web server and reverse proxy th ...

  3. Ubuntu 系统下可以做什么?

    ubuntu和windows到底有什么不同呢?从大的方面讲,它们的设计理念不同.借用一位知乎前辈说的“windows为不知道自己正在做什么的人设计,linux为知道自己要做什么,正在做什么的人设计”. ...

  4. 如何转换指定 波长 到 RGB 颜色?

    //指定波长转换成RGBA颜色 std::vector<int> lambdaToColor(double lambda,double gamma = 0.8,double intensi ...

  5. linux增加 路由使两个不同的网段可以访问

    举例:在交换机上有2个vlan 地址分别是192.168.10.1/24 192.168.20.1/24 2台server:一台A:server地址是192.168.10.3/24,一台B:serve ...

  6. Linux三种网络

    Host-Only 桥接

  7. web.xml文件配置说明

    web.xml作用: web.xml主要用来配置Filter.Listener.Servlet等,当我们去启动一个WEB项目时,容器(jetty.tomcat等)首先会读取项目web.xml配置文件里 ...

  8. 视频解码芯片SAA7111A的初始化

    为了完成SAA7111A的初始化,FPGA需要完成I2C控制器的设计. 之前本科的时候初步接触过I2C,但是编写一个Verilog的控制器还是觉得有点难度的.说实话,那时候都无从下手,对实现这样一个协 ...

  9. 常用MS-SQL写法整理

    这里整理日常会用到的一些写法,一些常规的group by,系统函数等用法不在这里做记录了,大家有什么好的写法也可以分享下 1 sql操作xml内容(sp_xml_preparedocument和ope ...

  10. Yii2 自定义独立验证器

    新建一个文件: ?php /** * author : forecho <caizhenghai@gmail.com> * createTime : 2015/7/1 14:54 * de ...