基于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 相关文章推荐
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Vue函数式组件-你值得拥有
May 09 Javascript
node 版本切换的实现
Feb 02 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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中使用redis队列操作实例代码
2013/02/07 PHP
学习ExtJS form布局
2009/10/08 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
PHP守护进程实例
2015/03/06 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python 学习笔记
2008/12/27 Python
Python爬取三国演义的实现方法
2016/09/12 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python 安装移动复制第三方库操作
2020/07/13 Python
装饰资料员岗位职责
2013/12/30 职场文书
美术教师岗位职责
2014/03/18 职场文书
庆七一活动总结
2014/08/27 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
工作失误检讨书
2015/01/26 职场文书
个人催款函范文
2015/06/23 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers