经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
原生js实现表单的正则验证（验证通过后才可提交）
来源：jb51　　时间：2021/5/7 12:38:29　　对本文有异议

实现了如下功能：

1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过

2.邮箱：onblur 正则匹配，正则是根据自己的需求写的，可以根据个人需求更改

3..密码：onkeyup时显示密码的强弱度，onblur时验证密码，是否为相同字符，是否全字符，或全数字，长度是否符合要求

4.确认密码：验证是否和上一次一致

5.提交按钮只有在全部input验证通过后才有效，否则无效

主要知识点：

1.中文为两个字符：

  1. function getLength(str) {
  2.     return str.replace(/[^\x00-xff]/g, "xx").length;
  3.     //x00-xff表示在ascii码中所有的双字节字符，这句话意思是将所有非单字节的字符替换成xx，即两个单字节字符，然后再计算长度
  4. }

2.邮箱验证的正则：

  1. var re_e = /^[\w_\.\-]+@[\w]+.([\w]{2,4})$/g

3.是否全为相同字符：

  1. function findStr(str, n){
  2.     var temp = 0;
  3.     for(var i = 0;i<str.length;i++){
  4.         if(str.charAt(i)==n){
  5.             temp++:
  6.         };
  7.     }
  8. }

4.是否全为数字，是否全为字符

  1.  var　re_n =/[^\d]/g ;
  2.  if(!re_n.test(str)){//全为数字}
  3.  
  4.  var　re_n =/[^\a-zA-Z]/g ;
  5.  if(!re_n.test(str)){//全为字符}

5.表单验证全部通过按钮才有效，可提交：

//我的处理是，在每一个input中都加入一个验证标识符，例如email_state；另写一个验证的函数，验证这四个input的验证标识符则将按钮设为可点，反之则禁用；再每一次onblur的时候都调用一次这个验证函数。

完整代码如下

  1. function register() {
  2.     var oName = document.getElementById("name");
  3.     var count = document.getElementById("count");
  4.     var psw = document.getElementById("psw");
  5.     var psw2 = document.getElementById("psw2");
  6.     var email = document.getElementById("email");
  7.     var name_msg = document.getElementsByClassName("name_msg")[0];
  8.     var psw_msg = document.getElementsByClassName("psw_msg")[0];
  9.     var psw2_msg = document.getElementsByClassName("psw2_msg")[0];
  10.     var email_msg = document.getElementsByClassName("email_msg")[0];
  11.     var psw = document.getElementById("psw");
  12.     var psw2 = document.getElementById("psw2");
  13.     var intensity = getByClass("intensity")[0].getElementsByTagName("span");
  14.     var registerbtn = document.getElementById("submit");
  15.     var oName_state = false;
  16.     var email_state = false;
  17.     var psw_state = false;
  18.     var psw2_state = false;
  19.     var name_length = 0;
  20.  
  21.     oName.onfocus = function() {
  22.         name_msg.style.display = "inline-block";
  23.     }
  24.     oName.onkeyup = function() {
  25.         count.style.visibility = "visible";
  26.         name_length = getLength(this.value);
  27.         count.innerHTML = name_length + "个字符";
  28.         if (name_length == 0) {
  29.             count.style.visibility = "hidden";
  30.         }
  31.     }
  32.     oName.onblur = function() {
  33.         //含有非法字符 不能为空 长度超25 长度少于6个字符
  34.         var re = /[^\w\u4e00-\u9fa5]/g;
  35.         if (re.test(this.value)) {
  36.             name_msg.innerHTML = "<i class='fa fa-close'>含有非法字符</i>";
  37.             oName_state = false;
  38.         } else if (this.value == "") {
  39.             name_msg.innerHTML = "<i class='fa fa-close'>不能为空</i>";
  40.             oName_state = false;
  41.         } else if (name_length > 25) {
  42.             name_msg.innerHTML = "<i class='fa fa-close'>不能超出25个字符</i>";
  43.             oName_state = false;
  44.         } else if (name_length < 6) {
  45.             name_msg.innerHTML = "<i class='fa fa-close'>不能少于6个字符</i>";
  46.             oName_state = false;
  47.         } else {
  48.             name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
  49.             oName_state = true;
  50.         }
  51.         checkform();
  52.     }
  53.  
  54.     psw.onfocus = function() {
  55.         psw_msg.style.display = "inline-block";
  56.         psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6-16个字符，不能单独使用字母、数字或符号</i>"
  57.     }
  58.     psw.onkeyup = function() {
  59.         if (this.value.length > 5) {
  60.             intensity[1].className = "active";
  61.             psw2.removeAttribute("disabled");
  62.             psw2_msg.style.display = "inline-block";
  63.         } else {
  64.             intensity[1].className = "";
  65.             psw2.setAttribute("disabled", "");
  66.             psw2_msg.style.display = "none";
  67.         }
  68.         if (this.value.length > 10) {
  69.             intensity[2].className = "active";
  70.             psw2.removeAttribute("disabled");
  71.             psw2_msg.style.display = "inline-block";
  72.         } else {
  73.             intensity[2].className = "";
  74.         }
  75.     }
  76.     psw.onblur = function() {
  77.         //不能为空 不能相同字符 长度6-16 不能全数字 不能全字母 
  78.         var m = findStr(psw.value, psw.value[0]);
  79.         var re_n = /[^\d]/g;
  80.         var re_t = /[^a-zA-Z]/g;
  81.         if (this.value == "") {
  82.             psw_msg.innerHTML = "<i class='fa fa-close'>不能为空</i>";
  83.             psw_state = false;
  84.         } else if (m == this.value.length) {
  85.             psw_msg.innerHTML = "<i class='fa fa-close'>不能为相同字符</i>";
  86.             psw_state = false;
  87.         } else if (this.value.length < 6 || this.value.legth > 16) {
  88.             psw_msg.innerHTML = "<i class='fa fa-close'>长度应为6-16个字符</i>";
  89.             psw_state = false;
  90.         } else if (!re_n.test(this.value)) {
  91.             psw_msg.innerHTML = "<i class='fa fa-close'>不能全部为数字</i>";
  92.             psw_state = false;
  93.         } else if (!re_t.test(this.value)) {
  94.             psw_msg.innerHTML = "<i class='fa fa-close'>不能全部为字母</i>";
  95.             psw_state = false;
  96.         } else {
  97.             psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
  98.             psw_state = true;
  99.         }
  100.         checkform();
  101.     }
  102.  
  103.  
  104.     psw2.onblur = function() {
  105.         if (psw2.value != psw.value) {
  106.             psw2_msg.innerHTML = "<i class='fa fa-close'>两次输入不一致</i>";
  107.             psw2_state = false;
  108.         } else {
  109.             psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
  110.             psw2_state = true;
  111.         }
  112.         checkform();
  113.     }
  114.  
  115.     email.onblur = function() {
  116.         var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;
  117.         if (!re_e.test(this.value)) {
  118.             email_msg.innerHTML = "<i class='fa fa-close'>请输入正确的邮箱格式</i>";;
  119.             email_state = false;
  120.         } else {
  121.             email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
  122.             email_state = true;
  123.         }
  124.         checkform();
  125.     }
  126.     function checkform() {
  127.         if (oName_state && oName_state && psw_state && psw2_state) {
  128.             registerbtn.removeAttribute("disabled");
  129.             // registerbtn.className+=" "+"readySubmit";
  130.             $("#submit").addClass("readySubmit");
  131.         } else {
  132.             registerbtn.setAttribute("disabled", "");
  133.             //registerbtn.className = registerbtn.className.replace( new RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );  
  134.             // registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );       
  135.             $("#submit").removeClass("readySubmit");
  136.         }
  137.     }
  138. }
  139.  
  140. function getLength(str) {
  141.     return str.replace(/[^\x00-xff]/g, "xx").length;
  142. }
  143.  
  144. function findStr(str, n) {
  145.     var temp = 0;
  146.     for (var i = 0; i < str.length; i++) {
  147.         if (str.charAt(i) == n) {
  148.             temp++;
  149.         }
  150.     }
  151.     return temp;
  152. }

部分html代码

  1. <form id="form">
  2.    <div class="name-field">
  3.         <label>用户名</label>
  4.         <input type="text" id="name" autofocus requiered/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5-25个字符，1个汉字为两个字符，推荐使用中文会员名</i></span>
  5.         <div id="count">0个字符</div>
  6.    </div>
  7.    <div class="email-field" requiered>
  8.         <label>邮箱</label>
  9.        <input type="text" id="email" /><span class="msg email_msg"></span>
  10.        </div>
  11.    <div class="pwd-field" requiered>
  12.         <label>密码</label>
  13.         <input type="password" id="psw" /><span class="msg psw_msg"></span>
  14.         <div class="intensity">
  15.             <span class="active">弱</span><span>中</span><span>强</span>
  16.        </div>
  17.    </div>
  18.    <div class="pwd2-field" requiered>
  19.         <label>确认密码</label>
  20.         <input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">请再次输入</span>
  21.    </div>
  22.    <button type="submit" id="submit" disabled="" class="submitBtn">注册</button>
  23. </form>

CSS部分

  1. .name-field {
  2.     margin-top: 10px
  3. }
  4.  
  5. .email-field {
  6.     margin-top: 3px
  7. }
  8.  
  9. .pwd-field {
  10.     margin-top: 10px
  11. }
  12.  
  13. .pwd2-field {
  14.     margin-top: 10px
  15. }
  16.  
  17. .register label {
  18.     float: left;
  19.     width: 80px;
  20.     margin-right: 10px;
  21.     text-align: right
  22. }
  23.  
  24. .register .name_msg,
  25. .register .psw_msg,
  26. .register .psw2_msg,
  27. .register .email_msg {
  28.     margin-left: 10px;
  29.     display: none
  30. }
  31.  
  32. .intensity,
  33. #count {
  34.     padding-left: 90px;
  35.     margin-top: 3px
  36. }
  37.  
  38. #count {
  39.     visibility: hidden;
  40.     color: #999;
  41.     font-size: 12px
  42. }
  43.  
  44. .intensity span {
  45.     display: inline-block;
  46.     background: #FBAA51;
  47.     width: 55px;
  48.     height: 20px;
  49.     text-align: center
  50. }
  51.  
  52. .intensity .active {
  53.     background: rgba(0, 128, 0, 0.61)
  54. }
  55.  
  56. .register .submitBtn {
  57.     width: 163px;
  58.     margin: 10px 0 0 90px
  59. }
  60.  
  61. #submit {
  62.     color: #555
  63. }

总结

到此这篇关于原生js实现表单的正则验证（验证通过后才可提交）的文章就介绍到这了,更多相关js表单正则验证内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号