Vue input标签 email和手机号输入验证

莫及雨

已于 2022-02-02 13:45:58 修改

阅读量3.8k

点赞数 2

分类专栏：项目 vue 文章标签： vue.js 前端

于 2022-02-01 17:16:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46806380/article/details/122764923

版权

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

项目

6 篇文章

订阅专栏

本文详细介绍了如何使用VueInput在前端进行电子邮件(email)和手机号码验证，包括邮箱格式校验规则及手机号正则表达式，提供了相关验证函数和组件配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue input标签 email和手机号输入验证

1、 email邮箱验证规则
2、手机号正则表达式验证规则
vue写法：

<script>
export default {
  data() {
    // 验证手机号的规则
    var cheackMobile = (rule, value, cb) => {
     // 手机号一般最小以“13”开头
      const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号!'))
    }
    return {
    	email: '',
        phone: '',
        rules: {
	        email: [
	          { required: true, message: '请输入邮箱', trigger: 'blur' },
	          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
	       phone: [
	          { required: true, message: '请输入手机号', trigger: 'blur' },
	          { validator: cheackMobile, trigger: 'blur' }]
    }
  }
}
</script>