正则表达式（时间、日期、邮箱、手机号）

原创于 2021-12-24 18:04:21 发布 · 981 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式 #vue.js #javascript

工具类专栏收录该内容

24 篇文章

订阅专栏

这篇博客详细介绍了正则表达式在前端验证中的应用，包括时间、邮箱、手机号码、中文字符、日期和日期时间的格式校验。提供了Vue中对应的验证规则示例，帮助开发者更好地进行数据格式验证。

//时间的正则表达式
var reg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
var regExp = new RegExp(reg);
if(!regExp.test(value)){
　　alert("时间格式不正确，正确格式为：12:00:00");
　　return;
}
//去掉最后一个:[0-5]\d 表示没有秒表 即12:00

二、邮箱

/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

vue中格式校验例子

rules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {
                callback(new Error("请输入邮箱"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
}

三、手机号码

/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i

vue中格式校验例子

rules: {
        title: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {
                callback(new Error("请输入手机号"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
}

四、只能输入中文

/^[\u4e00-\u9fa5]+$/

五、日期 2022-01-01

//日期的正则表达式
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if(!regExp.test(value)){
　　alert("日期格式不正确，正确格式为：2022-01-01");
　　return;
}

六、日期+时间 2022-01-01 12:00:00

//日期+时间的正则表达式

var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
var regExp = new RegExp(reg);
if(!regExp.test(value)){
　　alert("时间格式不正确,正确格式为: 2022-01-01 12:00:00 ");
　　return;
　　}
});