基于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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
javascript验证身份证号
2015/03/03 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python滑块验证码的破解实现
2019/11/10 Python
python3将变量输入的简单实例
2020/08/19 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
创先争优宣传标语
2014/10/08 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
会议主持人开场白台词
2015/05/28 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Python 中的 copy()和deepcopy()
2021/11/07 Python