js正则表单验证（trim封装）

最新推荐文章于 2024-07-31 11:27:39 发布

JunXian9102

最新推荐文章于 2024-07-31 11:27:39 发布

阅读量886

点赞数

本文链接：https://blog.csdn.net/smiple9102/article/details/71125200

版权

js特效基础笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

笔记见本地js特效day05，

规律:

座机验证：

匹配电话号码:开头3-4位（首位为0），后面7或8位。

(枢纽城市的座机以0开头。人口多后8位，人口少后7位。)

姓名验证：

只能是汉字，并且字数2-6个之间

[\u4e00-\u9fa5],unicode转中文可以用unescape()打印转换。

QQ验证：

5到11位开头是不为0的数字。
手机验证：

手机号11位数字，而且有号段限制 13[0-9] 14[57] 15[0-9] 17[1456789] 18[0-9]

邮箱验证：

\w单词字符包括：英文字母，数字，下划线（不包括中划线）姓名的中划线可以出现0次或多次。

封装trim方法：
在做表单验证的时候，我们经常需要检查输入框是否为空，
一个简单的做法是判断value==”“;

但是如果用户输入了空格或者缩进等字符，
这个判断就不起作用了。

PHP有一个很好的函数trim可以去除字符串首尾的空白字符，虽然旧版原生js并没有提供
这个函数，但是我们可以自定义一个函数。

替换掉开头和结尾的空白符
return str.replace(/^\s+|\s+$/g,”“);

<body>
  <script>
  /*获取输入框*/
    var inpQQ =document.getElementById('inp1');
    var inpMobile =document.getElementById('inp2');
    var inpEmail=document.getElementById('inp3');
    var inpTel=document.getElementById('inp4');
    var inpName=document.getElementById('inp5');
    var inp6=document.getElementById('inp6');
//输入框对应的规律
    var regQQ=/^[1-9]\d{4,10}$/;
    var regMobile=/^(13[0-9]|14[57]|15[0-9]|17[1456789]|18[0-9])\d{8}$/;
    var regEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)\.\w+$/;//*号出现0次或多次，中括号外的点号需要转义。表示域名的只有减号和点号
    var regTel=/^\d{2,3}-\d{7,8}$/;
    var regName=/^[\u4e00-\u9fa5]{2,6}$/;
//绑定事件调用函数
    check(inpQQ,regQQ);
    check(inpMobile,regMobile);
    check(inpEmail,regEmail);
    check(inpName,regName);
    check(inpTel,regTel);
/*封装函数：*/
function check(inp,regEx){/*check传参（输入对象，正则规则）*/
  inp.onblur=function () {
       if (regEx.test(this.value)) {
        this.nextSibling.innerHTML="正确";
        this.nextSibling.className="right";
       }else{
        this.nextSibling.innerHTML="错误";
        this.nextSibling.className="wrong";
      }
    }
}

inp6.onblur=function  () {
  if (trim(this.value) === "") {
    this.nextSibling.innerHTML="输入不能为空";
    this.nextSibling.className="wrong";
  }else{
    this.nextSibling.innerHTML="正确";
    this.nextSibling.className="right";
  }
};
function trim(str){
  return str.replace(/^\s+|\s+$/g,"");//打开全局模式，替换完开头的，接着替换结尾。
}
  </script>
</body>