如何在Java Script中实现表单验证（通过正则表达式）

m0_66605858

于 2022-08-01 21:11:31 发布

阅读量348

点赞数 2

文章标签： javascript java 正则表达式

本文链接：https://blog.csdn.net/m0_66605858/article/details/126110078

版权

本文详细介绍了前端开发中如何使用JavaScript进行非空验证和正则表达式验证，包括手机号、姓名、邮箱、密码和验证码的验证规则。通过示例代码展示了如何在实际场景中应用这些验证，确保用户输入数据的有效性和安全性。

摘要由CSDN通过智能技术生成

首先我们应当明确需求（以下图为例）

我们应当（1. 百分百还原静态页面 2.完成js非空验证及正则验证）

首先我们应当明确如何完成JS非空及正则验证。

非空验证就是通过 Js中的方法判断不为空值，而正则验证则需要通过正则表达式验证，以下是常用的正则表达式来验证问题。

手机号正则
/^1([358][0-9]|4[456789]|66|7[0135678]|9[189])\d{8}$/

姓名正则
^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$
1、不能有特殊字符和数字；

2、可以输入英文，可以有空格，可以输入英文名字中的点；

3、可以输入汉字；

4、中文英文不能同时出现；

5、长度在1-20；

邮箱正则
/^\w+@[a-zA-Z0-9]+((\.[a-z0-9A-Z]{1,})+)$/

密码正则
/^[0-9a-zA-Z]{6,12}$/

验证码正则
/^\d{6}$/

纯汉字正则

/^[\u4e00-\u9fa5]{0,}$/

身份证正则

/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

js使用正则方式

正则.test(数据)。

代码实现（JS部分）


    <script>
          function returnValidName(){
            var userid = document.getElementById("userid");
            if(userid.value == ""){
                alert("姓名不得为空");
                return false
            }
            var idReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
            if(!idReg.test(userid.value)){
                alert("请输入正确的姓名");
                return false;
            }

            var userphone = document.getElementById("userphone");
            if(userphone.value == ""){
                alert("电话不得为空");
                return false
            }
            var phoneReg = /^1([358][0-9]|4[456789]|66|7[0135678]|9[189])\d{8}$/;
            if(!phoneReg.test(userphone.value)){
                alert("请输入正确的电话");
                return false;
            }

            var useremail= document.getElementById("useremail");
            //判断登录邮箱是否为空
            if(useremail.value == ""){
                alert("登录邮箱不能为空");
                return false;
            }
            var emailReg = /^\w+@[a-zA-Z0-9]+((\.[a-z0-9A-Z]{1,})+)$/;
            if(!emailReg.test(useremail.value)){
                alert("请输入正确邮箱");
                return false;
            }

            var userpwd = document.getElementById("userpassword");
            //判断登录密码是否为空
            if(userpwd.value == ""){
                alert("登录密码不能为空");
                return false;
            }
            var pwdReg = /^[0-9a-zA-Z]{6,12}$/;
            if(!pwdReg.test(userpwd.value)){
                alert("请输⼊6-12位的登录密码");
                return false;
            }

        }

    </script>
</body>
</html>