基于javascript的Form表单验证

作者:pengbo518 时间:2024-04-10 16:20:03 

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" />&nbsp;
             <input type="text" id="month" class="length" disabled="disabled" />&nbsp;
             <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表单验证

标签:js,form,表单验证
0
投稿

猜你喜欢

  • Python编程之event对象的用法实例分析

    2023-02-19 09:29:50
  • vue实现一个懒加载的树状表格实例

    2023-07-02 17:06:45
  • 利用Python实现Shp格式向GeoJSON的转换方法

    2021-01-30 09:14:49
  • 如何用Python进行时间序列分解和预测

    2022-06-20 14:39:42
  • django框架F&Q 聚合与分组操作示例

    2021-05-21 02:13:56
  • Pycharm运行加载文本出现错误的解决方法

    2021-02-01 09:07:18
  • python判断自身是否正在运行的方法

    2022-07-30 02:34:44
  • JavaScript导出Excel实例详解

    2023-09-06 15:51:27
  • python求质数列表的例子

    2021-01-10 01:42:56
  • Python中parsel两种获取数据方式小结

    2023-03-01 17:44:50
  • django框架基于queryset和双下划线的跨表查询操作详解

    2022-02-22 04:30:32
  • MySQL中InnoDB存储引擎的锁的基本使用教程

    2024-01-21 09:27:01
  • 用python爬虫爬取CSDN博主信息

    2023-06-13 08:11:10
  • 如何使用索引提高查询速度

    2024-01-15 02:14:15
  • Go语言结构体Go range的学习教程

    2024-05-05 09:33:49
  • 非常全面的实用JavaScript开发工具列表

    2010-01-05 16:44:00
  • 详解python读取matlab数据(.mat文件)

    2021-03-04 19:29:29
  • python中面向对象的注意点概述总结

    2023-10-08 09:35:11
  • 用js实现放大镜效果

    2023-09-19 18:29:29
  • php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析

    2024-05-11 10:02:47
  • asp之家 网络编程 m.aspxhome.com