基于javascript的Form表单验证


Posted in Javascript onDecember 29, 2016

Form表单验证:
js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等。完整代码如下:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>form-lpb</title>
    <style>
      body {
        background:#CCF;
        font-size:12px;  
      }
      .box {
        margin:20px 50px;
        line-height:25px;    
      }
      .box .box_sel {
        margin-left:25px;    
      }
       .text {
        text-align:right;    
      }
      span {
        color:#900;    
      }
      .length {
        width:38px;    
      } 
    </style>  
  </head>
  
  <body>
    <div class="box">
        <!--form star-->
      <form action="submit.html" onsubmit="return checkAll()">
        <table>
          <tr>
            <td class="text">账号</td>
            <td><input type="text" id="userName" onblur="b_userName()" /></td>
            <td><span id="span_userName"></span></td>
          </tr>
          <tr>
            <td class="text"> 密码</td>
            <td><input type="password" id="pass" onblur="b_pass()" /></td>
            <td> <span id="span_pass"></span></td>
          </tr>
          <tr>
            <td class="text">重复密码</td>
            <td><input type="password" id="pass1" onblur="b_pass1()" /></td>
            <td> <span id="span_pass1"></span></td>
          </tr>
          <tr>
            <td class="text">手机号</td>
            <td><input type="text" id="tel" onblur="b_tel()" /></td>
            <td> <span id="span_tel"></span></td>
          </tr>
          <tr>
            <td class="text">身份证号</td>
            <td><input type="text" id="idCard" onblur="b_idCard()" /></td>
            <td><span id="span_idCard"></span></td>
          </tr>
          <tr>
            <td class="text">出生年月日</td>
            <td>
              <input type="text" id="year" class="length" disabled="disabled" /> 
              <input type="text" id="month" class="length" disabled="disabled" /> 
              <input type="text" id="day" class="length" disabled="disabled" />
            </td>
          </tr>
          <tr>
            <td class="text"> 邮箱</td>
            <td><input type="text" id="email" onblur="b_email()" /></td>
            <td><span id="span_email"></span></td>
          </tr>
        </table>
        <div class="box_sel">   
        爱好
            <select>
              <option>篮球</option>
              <option>足球</option>
              <option>排球</option>
            </select>
        地区    
            <select>
              <option>河南</option>
              <option>湖南</option>
              <option>河北</option>
            </select>
             <br />
            <input type="checkbox" id="ch_box" onclick="c_box()" />
              是否同意
              <a href="xieyi.html" target="_blank">公司协议</a>
            <br />
              <input type="submit" id="sub" value="提交注册" disabled="disabled" />
              <input type="reset" id="rst" value="重新填写" onclick="sub_return()" />
        </div>    
      </form> 
      <!--end form -->
    </div>   
      <script>
        // 用户名 校验
        function b_userName(){
            var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式
            var c_use = document.getElementById("userName").value;
            var c_span_use = document.getElementById("span_userName");
              if(reg.test(c_use)){
                c_span_use.innerHTML="√";
                return true;
              }else {
                c_span_use.innerHTML="用户名必须以3-9个字母开头,可以有下划线_,后面3-9个数字";  
              }        
        }
        // 密码 校验 
        function b_pass(){
            var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密码-正则表达式
            var c_pass = document.getElementById("pass").value;
            var c_span_pass =document.getElementById("span_pass");
              if(reg.test(c_pass)){
                c_span_pass.innerHTML="√";
                return true;
              }
              
              else {
                c_span_pass.innerHTML="密码必须以3-6个英文字母开头,后面3-9个数字";
                return false;  
              }
        }
        // 重复密码 校验、
        function b_pass1(){
            var cm = document.getElementById("pass1").value;
            var cm_sp = document.getElementById("span_pass1");
            var c_pass = document.getElementById("pass").value;
              if(cm==c_pass&&cm!=""){
                cm_sp.innerHTML="√";
                return true;
              }else{
                cm_sp.innerHTML="请重复密码";  
                return false;
              }    
        }
        // 手机号 校验
        function b_tel(){
            var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/;
            var c_tel = document.getElementById("tel").value;
            var c_span_tel = document.getElementById("span_tel");
              if(reg.test(c_tel)){
                c_span_tel.innerHTML="√";
                return true;  
              }else {
                c_span_tel.innerHTML="手机号可以(+86)第一位是1,第二位是【3,5,8】,共11位数字";
                return false;
              }  
        }
        // 身份证号 校验
        function b_idCard(){
            var reg = /\d{17}\w{1}|\d{15}/;
            var c_idCard = document.getElementById("idCard").value;
            var c_span_idCard = document.getElementById("span_idCard");
              if(reg.test(c_idCard)){
                c_span_idCard.innerHTML="√";
                document.getElementById("year").value=c_idCard.substr(6,4);// 自动 获取 年份 
                document.getElementById("month").value=c_idCard.substr(10,2);// 自动 获取 月份
                document.getElementById("day").value=c_idCard.substr(12,2);
                return true;
              }else{
                c_span_idCard.innerHTML="身份证格式错误,必须是18位数或者是15位数";
                document.getElementById("year").value="";// 自动 获取 年份 
                document.getElementById("month").value="";// 自动 获取 月份
                document.getElementById("day").value="";
                return false;
              }  
        }
        // 邮箱 校验
        function b_email(){
            var reg = /\w+@\w+\.\w+/;
            var c_email = document.getElementById("email").value;
            var c_span_email = document.getElementById("span_email");
              if(reg.test(c_email)){
                c_span_email.innerHTML="√";
                return true;
              }else {
                c_span_email.innerHTML="邮箱格式错误,必须包含 @ 和 . ";
                return false;            
              }    
        }
        // 协议 校验
        function c_box(){
            var c_b = document.getElementById("ch_box");
            var c_sub = document.getElementById("sub");
              if(c_b.checked){
                c_sub.disabled=false;
              }else{
                c_sub.disabled=true;  
              }          
        } 
        // sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态
        function sub_return(){
          var subt = document.getElementById("sub");   
            subt.disabled=true;
          var span_clean = document.getElementsByTagName("span");  
          
            for(var i=0;i<=span_clean.length;i++){
              var span1 = span_clean[i];
              span1.innerHTML= "";    
            }  
        } 
        // 整体 校验
        function checkAll(){
          var c1 =b_userName();
          var c2 =b_pass();
          var c3 =b_tel();
          var c4 =b_idCard();  
          var c5 =b_email();
            if(c1&&c2&&c3&&c4&&c5){
              return true;
            }else{
              return false;    
            }
        }
      </script>   
  </body>
</html>

效果如下图所示:

基于javascript的Form表单验证

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
多种方式实现js图片预览
Dec 12 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 #Javascript
bootstrap导航条实现代码
Dec 28 #Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 #Javascript
bootstrap导航、选项卡实现代码
Dec 28 #Javascript
bootstrap提示标签、提示框实现代码
Dec 28 #Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 #Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 #Javascript
You might like
php header示例代码(推荐)
2010/09/08 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
基于python绘制科赫雪花
2018/06/22 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
中学生旷课检讨书2篇
2014/10/09 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python