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

admin管理员组

文章数量:1634825

利用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>

本文标签： 手机号账号用户名邮箱页面