利用JavaScript的正则表达式去实现注册页面的验证（账号，邮箱，手机号，用户名）

最佳听众!

已于 2022-05-20 15:57:07 修改

阅读量5.4k

点赞数 9

分类专栏： javaScript 文章标签：正则表达式 javascript

于 2021-05-04 18:40:05 首次发布

本文链接：https://blog.csdn.net/weixin_45851575/article/details/116403390

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript的正则表达式来校验注册页面的账号、邮箱、手机号和用户名。通过创建不同的正则表达式，实现了对输入内容的格式检查，确保用户输入的数据符合规范。当输入不符合要求时，会弹出相应的提示，并将光标定位到错误字段，帮助用户快速修正问题。

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

利用JavaScript的正则表达式去实现注册页面的验证（账号，邮箱，手机号，用户名）

先新建一个表单效果如下：

在这里插入图片描述

Script代码的实现

<script type="text/javascript" >
    //校验ID
    function checkID(str) {
        var ID=/^[0-9]{10}$/;// /^开始的意思 &/关闭的意思  [0-9]查找从0-9的数  花括号{10}一共为十位数
        return ID.test(str);//使用test方法，符合Name的规范就的到true，反之的到false

        }
    //校验Name
    function checkName(str) {
       var Name=/^[\u4E00-\u9FA5]{2,5}$/;//[\u4E00-\u9FA5] 判断是不是中文 字符为2到5个中文
        return Name.test(str);//使用test方法，符合Name的规范就的到true，反之的到false
    }
    //校验邮箱
    function checkEmail(str) {
        var email=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        //\w+：表示至少出现一次单词字符\w（单词字符包括：a-z、A-Z、0-9，以及下划线, 包含 _ (下划线) 字符）
        //@[a-zA-z0-9]{2,10}：@+出现2到10位的大小写字母或数字/
       // (?:.[a-z]{2,4}){1,3} ：(?:)代表分组匹配；匹配要求是"."+2到4位小写字母，此即为一个满足要求的分组；{1,3}表示要求分组出现1到3次
        return email.test(str) ;
    }
    //校验手机号
    function checkPhone(str) {
         var phone=/^[0-9]{11}$/;
         return phone.test(str);
    }

     function  check() {
         var name=document.getElementById("name").value;**//获取到表单的name值**
         var id=document.getElementById("id").value;//获取id的值
         var email=document.getElementById("email").value;//获取email的值
         var phone=document.getElementById("phone").value;//获取phone的值
         if(!checkName(name)){//调用函数checkName（）去判断name是否合格 不合格执行以下操作
             alert("请重新输入姓名");//提示重新输入
             document.getElementById("name").focus();//获取光标
             return false;//返回false 表单不能成功提交
         }
         if(!checkID(id)){//调用checkID函数去判断ID
              alert("ID为十位数 请重新输入");
              document.getElementById("id").focus();
              return false;
         }

         if(!checkEmail(email)){
              alert("邮箱格式不对");
              document.getElementById("email").focus();
             return false;
         }
         if(!checkPhone(phone)){
            alert("手机号不对");
            document.getElementById("phone").focus();
             return false;
         }
         alert("成功注册");
         return  true;
     }
</script>