JavaScript正则表达式应用-手机号码校验

最新推荐文章于 2026-05-15 06:47:52 发布

原创最新推荐文章于 2026-05-15 06:47:52 发布 · 2k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

YangCzcp月色

关注

标签

#javascript

分类前端开发

正则表达式专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中使用正则表达式进行手机号码校验的方法，包括正则表达式的各种规则，如非负整数、正整数、负整数、整数、浮点数以及各种字符串格式的匹配。特别地，给出了一条用于匹配11位手机号码的正则表达式`^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])d{8}$`，详细解释了其含义。" 113018654,10539541,加速升级Proxmox VE 5.4到6.0：中国源替换教程,"['proxmox换源', 'Proxmox VE升级', '镜像源加速', 'Debian', 'Corosync']

正则表达式的规则

正则表达式

^\\d+$　　//非负整数（正整数 + 0）

^[0-9]*[1-9][0-9]*$　　//正整数

^((-\\d+)|(0+))$ //非正整数（负整数 + 0）

^-[0-9]*[1-9][0-9]*$　　//负整数

^-?\\d+$　　　　//整数

^\\d+(　　//非负浮点数（正浮点数 + 0）

^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$　 //正浮点数

^((-\\d+(　　//非正浮点数（负浮点数 + 0）

^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //负浮点数

^(-?\\d+)(　　//浮点数

^[A-Za-z]+$　　//由26个英文字母组成的字符串

^[A-Z]+$　　//由26个英文字母的大写组成的字符串

^[a-z]+$　　//由26个英文字母的小写组成的字符串

^[A-Za-z0-9]+$　　//由数字和26个英文字母组成的字符串

^\\w+$　　//由数字、26个英文字母或者下划线组成的字符串

匹配完整域名的正则表达式： [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?

举个小栗子：

^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$

解释：
^:代表起始，即手机号码只能以1为开头
3[0-9]：代表手机号码第二位可以是3，第三位可以是0-9中任意一个数字
5[0-3,5-9]：代表手机号码第二位也可以是5，第三位是0-3和5-9中的任意一个数字
在这里，以3开头的，以5开头的，以及以8开头的三种情况，我们用“|”来将他们隔开
\d：匹配一个数字字符，等价于 [0-9]
$:终止符，代表不可以再有第12位了

正则表达式的应用-电话号码的校验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式应用--电话号码检验</title>
</head>
<body>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" id="username" onblur="checkUsernaem()"></td>
            <td id="user_msg">长度6-13位，第一个必须是字母，其他只能是数字跟字母</td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" id="password" onblur="checkPassword()"></td>
            <td id="pwd_msg">英语字母和数字组成4-16位</td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="text" id="repawd" onblur="checkRepwd()"></td>
            <td id="repwd_msg">英语字母和数字组成4-16位</td>
        </tr>
        <tr>
            <td>电话号码</td>
            <td><input type="text" id="mobile" onblur="checkphone()"></td>
            <td id="phone_msg">请输入电话号码</td>
        </tr>
         <tr>
            <td>邮箱</td>
            <td><input type="text" id="email" onblur="checkemail()"></td>
            <td id="email_msg">请输入邮箱</td>
        </tr>

    </table>

    <script>
        //用户名
        function checkUsernaem() {
            //用户名文本框中的内容
            var username =document.getElementById('username').value
            var user_msg =document.getElementById('user_msg')
            //正则表达式
            //长度6-13位，第一个必须是字母，其他只能是数字跟字母

            var userReg=/^[a-zA-Z][a-zA-Z0-9]{5,13}$/

            if (username !="") {
                //判断用户名是否为空
                if (userReg.test(username)) {
                    //校验正则表达式
                    user_msg.innerHTML = "<span style='color:green;'>验证成功</span>"
                } else {
                    user_msg.innerHTML = "<span style='color:red;'>长度6-13位，第一个必须是字母，其他只能是数字跟字母</span>"
                }
            }else{
                user_msg.innerHTML = "<span style='color:red;'>用户名不能为空</span>"
            }
            
        }


        //密码
            function checkPassword() {
                
                var password =document.getElementById('password').value
                var pwd_msg  =document.getElementById('pwd_msg')
                //正则表达式
                //英语字母和数字组成4-16位
                var userpwd=/^[a-zA-Z0-9]{4,16}$/

                if (password !="") {
                    //判断密码是否为空
                     if (userpwd.test(password)) {
                        pwd_msg.innerHTML = "<span style='color:green;'>验证成功</span>"

                    } else {
                        pwd_msg.innerHTML = "<span style='color:red;'>英语字母和数字组成4-16位</span>"
                    }
                }else{
                    pwd_msg.innerHTML= "<span style='color:red;'>密码不能为空</span>"
                }
               
            }

            //确认密码
            function checkRepwd() {
                var repawd = document.getElementById('repawd').value
                var password =document.getElementById('password').value
                var repwd_msg = document.getElementById('repwd_msg')
                //正则表达式
                //英语字母和数字组成4-16位

               var userrepwd = /^[a-zA-Z0-9]{4,16}$/

                if (userrepwd.test(repawd)) {
                    // repwd_msg.innerHTML="<span style='color:green;'>输入正确</span>"
                        if ( password == repawd) {
                        repwd_msg.innerHTML = "<span style='color:green;'>密码一致</span>"    
                        }else{
                            repwd_msg.innerHTML = "<span style='color:red;'>两次密码不一致，请重试</span>"
                        }
                } else {
                    repwd_msg.innerHTML = "<span style='color:red;'>请输入密码</span>"
                    // repwd_msg.innerHTML= "<span style='color:blue;'>密码錯誤</span>"
                }
                
            }
        
            //电话号码
            function checkphone() {
                var mobile =document.getElementById('mobile').value
                var phone_msg =document.getElementById('phone_msg')
                //正则表达式
                var telephone=/^1[3456789]\d{9}$/

                //判断电话号码是否为空
                if (mobile !="") {
                    if (telephone.test(mobile)) {
                        phone_msg.innerHTML = "<span style='color:green;'>手机号码正确</span>"
                    } else {
                        phone_msg.innerHTML = "<span style='color:red;'>手机格式不正确</span>"
                    }
                }else{
                    phone_msg.innerHTML = "<span style='color:red;'>手机号码不能为空</span>"
                }
                
            }

            //邮箱
            function checkemail() {
                var email    =document.getElementById('email').value
                var email_msg =document.getElementById('email_msg')
                //正则表达式
                var youxiang=/^\w{3,10}\@\.com$/

                    if (email !="") {
                        //判断邮箱是否为空
                        if (youxiang.test(email)) {
                            email_msg.innerHTML = "<span style='color:green;'>邮箱格式正确</span>"
                        } else {
                            email_msg.innerHTML = "<span style='color:red;'>邮箱格式错误，请重试 例：aaa@.com</span>"
                        }
                    }else{
                        email_msg.innerHTML = "<span style='color:red;'>邮箱不能为空</span>"
                    }
            }


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

好了，大家下次见