扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >原生js实现表单的正则验证（验证通过后才可提交）
  • 424

0
分享到

原生js实现表单的正则验证（验证通过后才可提交）

2024-04-02 19:04:59 424人浏览 独家记忆
摘要

实现了如下功能： 1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过 2.邮箱：onblur 正则匹配，正则是根据自己的

实现了如下功能：

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

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

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

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

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

主要知识点：

1.中文为两个字符：


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

2.邮箱验证的正则：


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

3.是否全为相同字符：


function findStr(str, n){
    var temp = 0;
    for(var i = 0;i<str.length;i++){
        if(str.charAt(i)==n){
            temp++:
        };
    }
}

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


 var　re_n =/[^\d]/g ;
 if(!re_n.test(str)){//全为数字}

 var　re_n =/[^\a-zA-Z]/g ;
 if(!re_n.test(str)){//全为字符}

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

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

完整代码如下


function reGISter() {
    var oName = document.getElementById("name");
    var count = document.getElementById("count");
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var email = document.getElementById("email");
    var name_msg = document.getElementsByClassName("name_msg")[0];
    var psw_msg = document.getElementsByClassName("psw_msg")[0];
    var psw2_msg = document.getElementsByClassName("psw2_msg")[0];
    var email_msg = document.getElementsByClassName("email_msg")[0];
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var intensity = getByClass("intensity")[0].getElementsByTagName("span");
    var registerbtn = document.getElementById("submit");
    var oName_state = false;
    var email_state = false;
    var psw_state = false;
    var psw2_state = false;
    var name_length = 0;

    oName.onfocus = function() {
        name_msg.style.display = "inline-block";
    }
    oName.onkeyup = function() {
        count.style.visibility = "visible";
        name_length = getLength(this.value);
        count.innerhtml = name_length + "个字符";
        if (name_length == 0) {
            count.style.visibility = "hidden";
        }
    }
    oName.onblur = function() {
        //含有非法字符 不能为空 长度超25 长度少于6个字符
        var re = /[^\w\u4e00-\u9fa5]/g;
        if (re.test(this.value)) {
            name_msg.innerHTML = "<i class='fa fa-close'>含有非法字符</i>";
            oName_state = false;
        } else if (this.value == "") {
            name_msg.innerHTML = "<i class='fa fa-close'>不能为空</i>";
            oName_state = false;
        } else if (name_length > 25) {
            name_msg.innerHTML = "<i class='fa fa-close'>不能超出25个字符</i>";
            oName_state = false;
        } else if (name_length < 6) {
            name_msg.innerHTML = "<i class='fa fa-close'>不能少于6个字符</i>";
            oName_state = false;
        } else {
            name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            oName_state = true;
        }
        checkfORM();
    }

    psw.onfocus = function() {
        psw_msg.style.display = "inline-block";
        psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6-16个字符，不能单独使用字母、数字或符号</i>"
    }
    psw.onkeyup = function() {
        if (this.value.length > 5) {
            intensity[1].className = "active";
            psw2.removeAttribute("disabled");
            psw2_msg.style.display = "inline-block";
        } else {
            intensity[1].className = "";
            psw2.setAttribute("disabled", "");
            psw2_msg.style.display = "none";
        }
        if (this.value.length > 10) {
            intensity[2].className = "active";
            psw2.removeAttribute("disabled");
            psw2_msg.style.display = "inline-block";
        } else {
            intensity[2].className = "";
        }
    }
    psw.onblur = function() {
        //不能为空 不能相同字符 长度6-16 不能全数字 不能全字母 
        var m = findStr(psw.value, psw.value[0]);
        var re_n = /[^\d]/g;
        var re_t = /[^a-zA-Z]/g;
        if (this.value == "") {
            psw_msg.innerHTML = "<i class='fa fa-close'>不能为空</i>";
            psw_state = false;
        } else if (m == this.value.length) {
            psw_msg.innerHTML = "<i class='fa fa-close'>不能为相同字符</i>";
            psw_state = false;
        } else if (this.value.length < 6 || this.value.legth > 16) {
            psw_msg.innerHTML = "<i class='fa fa-close'>长度应为6-16个字符</i>";
            psw_state = false;
        } else if (!re_n.test(this.value)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>不能全部为数字</i>";
            psw_state = false;
        } else if (!re_t.test(this.value)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>不能全部为字母</i>";
            psw_state = false;
        } else {
            psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw_state = true;
        }
        checkform();
    }


    psw2.onblur = function() {
        if (psw2.value != psw.value) {
            psw2_msg.innerHTML = "<i class='fa fa-close'>两次输入不一致</i>";
            psw2_state = false;
        } else {
            psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw2_state = true;
        }
        checkform();
    }

    email.onblur = function() {
        var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;
        if (!re_e.test(this.value)) {
            email_msg.innerHTML = "<i class='fa fa-close'>请输入正确的邮箱格式</i>";;
            email_state = false;
        } else {
            email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            email_state = true;
        }
        checkform();
    }
    function checkform() {
        if (oName_state && oName_state && psw_state && psw2_state) {
            registerbtn.removeAttribute("disabled");
            // registerbtn.className+=" "+"readySubmit";
            $("#submit").addClass("readySubmit");
        } else {
            registerbtn.setAttribute("disabled", "");
            //registerbtn.className = registerbtn.className.replace( new RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );  
            // registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );       
            $("#submit").removeClass("readySubmit");
        }
    }
}

function getLength(str) {
    return str.replace(/[^\x00-xff]/g, "xx").length;
}

function findStr(str, n) {
    var temp = 0;
    for (var i = 0; i < str.length; i++) {
        if (str.charAt(i) == n) {
            temp++;
        }
    }
    return temp;
}

部分html代码


<form id="form">
   <div class="name-field">
        <label>用户名</label>
        <input type="text" id="name" autofocus requiered/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5-25个字符，1个汉字为两个字符，推荐使用中文会员名</i></span>
        <div id="count">0个字符</div>
   </div>
   <div class="email-field" requiered>
        <label>邮箱</label>
       <input type="text" id="email" /><span class="msg email_msg"></span>
       </div>
   <div class="pwd-field" requiered>
        <label>密码</label>
        <input type="passWord" id="psw" /><span class="msg psw_msg"></span>
        <div class="intensity">
            <span class="active">弱</span><span>中</span><span>强</span>
       </div>
   </div>
   <div class="pwd2-field" requiered>
        <label>确认密码</label>
        <input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">请再次输入</span>
   </div>
   <button type="submit" id="submit" disabled="" class="submitBtn">注册</button>
</form>

CSS部分


.name-field {
    margin-top: 10px
}

.email-field {
    margin-top: 3px
}

.pwd-field {
    margin-top: 10px
}

.pwd2-field {
    margin-top: 10px
}

.register label {
    float: left;
    width: 80px;
    margin-right: 10px;
    text-align: right
}

.register .name_msg,
.register .psw_msg,
.register .psw2_msg,
.register .email_msg {
    margin-left: 10px;
    display: none
}

.intensity,
#count {
    padding-left: 90px;
    margin-top: 3px
}

#count {
    visibility: hidden;
    color: #999;
    font-size: 12px
}

.intensity span {
    display: inline-block;
    background: #FBAA51;
    width: 55px;
    height: 20px;
    text-align: center
}

.intensity .active {
    background: rgba(0, 128, 0, 0.61)
}

.register .submitBtn {
    width: 163px;
    margin: 10px 0 0 90px
}

#submit {
    color: #555
}

总结

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

--结束END--

本文标题: 原生js实现表单的正则验证（验证通过后才可提交）

本文链接: https://lsjlt.com/news/125322.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 原生js实现表单的正则验证（验证通过后才可提交）
    实现了如下功能： 1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过 2.邮箱：onblur 正则匹配，正则是根据自己的...
    99+
    2024-04-02
  • 原生js怎么实现表单的正则验证
    这篇文章将为大家详细讲解有关原生js怎么实现表单的正则验证，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。JavaScript可以做什么1.可以使网页具有交互性，例如响应用户点击，给用户提供更好的体验。2....
    99+
    2023-06-14
  • JS如何通过正则表达式实现验证功能
    这篇文章主要为大家展示了“JS如何通过正则表达式实现验证功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何通过正则表达式实现验证功能”这篇文章吧。1、验...
    99+
    2024-04-02
  • Flex如何实现表单提交验证
    这篇文章给大家分享的是有关Flex如何实现表单提交验证的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。Flex表单提交验证一、定义Flex表单提交验证条件，如：source为要绑定的文本框，trigger为绑定提交...
    99+
    2023-06-17
  • JS中表单提交验证的示例分析
    这篇文章将为大家详细讲解有关JS中表单提交验证的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在进行表单提交时，需要对输入框和文本域等的value的合理性进行验证...
    99+
    2024-04-02
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下：1. 添加jQuery库文件到HTML页面中：```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • JS如何实现身份证信息验证正则表达式
    小编给大家分享一下JS如何实现身份证信息验证正则表达式，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！很多时候我们都是通过一组正则...
    99+
    2024-04-02
  • javascript手机验证、邮箱验证、密码验证的正则表达式简单封装实例
    javascript【手机验证】、【邮箱验证】、【密码验证】的正则表达式的封装： 【手机验证】： 以下代码是验证手机号码的正则表达式的方法， 【checkPhone】：表示的是方法的...
    99+
    2024-04-02
  • 微信小程序实现表单验证提交功能
    本文实例为大家分享了微信小程序实现表单验证提交的具体代码，供大家参考，具体内容如下 效果图： 说明：点击一键预约提交表单时我们需要验证一些必填项以及它们的格式。微信小程序表单验证跟...
    99+
    2024-04-02
  • 在nest.js中通过正则表达式正确设置验证的方法
    下面看下nest.js正则表达式设置验证的方法，代码如下所示： import { IsNotEmpty, Length, Matches, Max, Min } from "cl...
    99+
    2024-04-02
  • Ajax怎么实现带提示的验证表单
    这篇文章主要介绍“Ajax怎么实现带提示的验证表单”，在日常操作中，相信很多人在Ajax怎么实现带提示的验证表单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Ajax怎么实现...
    99+
    2024-04-02
  • element自定义表单验证上传身份证正反面的实现
    大概是这个样式  两个上传组件写在一个form-item里进行自定义表单验证 每次验证，通过判断上传组件绑定的值进行判断，callback不同的提示错误 <temp...
    99+
    2024-04-02
  • Vue3 + elementplus实现表单验证+上传图片+ 防止表单重复提交功能
    首先，上官网地址 https://element.eleme.cn/ 首先页面上面用了弹窗的形式，做完之后长这样，有全屏，关闭等按钮，上效果图和完整代码！！！！！ <!--点...
    99+
    2022-11-13
    Vue3  elementplus表单验证 Vue3  elementplus防止表单重复提交 Vue3  elementplus上传图片
  • BootStrap+Mybatis框架下如何实现表单提交数据重复验证
    这篇文章给大家分享的是有关BootStrap+Mybatis框架下如何实现表单提交数据重复验证的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果：jsp页面：<form&n...
    99+
    2024-04-02
  • bootstrap+Validator如何实现模态框、jsp、表单验证 Ajax提交功能
    这篇文章主要介绍bootstrap+Validator如何实现模态框、jsp、表单验证 Ajax提交功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果图：如图，这是使用Valid...
    99+
    2024-04-02
  • 如何实现layui中表单提交以及验证和修改弹框
    这篇文章主要介绍如何实现layui中表单提交以及验证和修改弹框，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ HTML <div class="layui-...
    99+
    2024-04-02
  • Linux中如何实现验证邮件地址的正则表达式
    这篇文章主要介绍Linux中如何实现验证邮件地址的正则表达式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！邮件地址的规范来自于 RFC 5322 。有一个网站 emailregex.com 专门列...
    99+
    2023-06-16
  • VUE中使用TypeScript装饰器实现表单验证的全过程
    目录前言装饰器class-validator封装Validator具体使用小结前言 最近接触了关于很多TypeScript装饰器的知识，以及class-validator这个用装饰器...
    99+
    2024-04-02
  • Nodejs中session的简单使用及通过session实现身份验证的方法
    session 不用多介绍，使一个http可以对应一个终端用户。 session的本质使用cookie来实现。 原理大概是：http 带来服务端提前设置 cookie，服务端拿到标示用户身份的cooki...
    99+
    2022-06-04
    身份验证 简单 方法
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作