基于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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
js有关元素内容操作小结
Dec 20 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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 全局变量范围分析
2009/08/07 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
static函数与普通函数有什么区别
2015/12/25 面试题
结婚喜宴主持词
2014/03/14 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
移交协议书
2014/08/19 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
护士医德医风自我评价
2014/09/15 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
村官个人总结范文
2015/03/03 职场文书
倡议书范文大全
2015/04/28 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
Python访问Redis的详细操作
2021/06/26 Python
netty 实现tomcat的示例代码
2022/06/05 Servers
python运行脚本文件的三种方法实例
2022/06/25 Python