javascript学习指南|javascript怎么用Form表单验证

时间:2020-12-18  来源:正则表达式  阅读:

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

            form-lpb                                                                      账号                                                              密码             word"id="pass"onblur="b_pass()"/>                                                重复密码             word"id="pass1"onblur="b_pass1()"/>                                                手机号                                                             身份证号                                                             出生年月日                                                                                                             邮箱                                                                  爱好                      地区                              
                           是否同意               公司协议             
                                                                     <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>     

效果如下图所示:

javascript学习指南|javascript怎么用Form表单验证

http://m.bbyears.com/aspjiaocheng/117293.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新