使用elementui自定义邮箱和手机号校验规则

 

<el-form

        :model="addUserForm"

        ref="addUserFormRef"

        :rules="addUserFormRules"

        label-width="100px"

      >

        <el-form-item label="邮箱" prop="email">

          <el-input v-model="addUserForm.email"></el-input>

        </el-form-item>

        <el-form-item label="手机" prop="mobile">

          <el-input v-model="addUserForm.mobile"></el-input>

        </el-form-item>

      </el-form>

data () {

 // 自定义邮箱规则
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback()
      }
      callback(new Error('请输入合法邮箱'))
    }
    // 自定义手机号规则
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(value)) {
        return callback()
      }
      // 返回一个错误提示
      callback(new Error('请输入合法的手机号码'))
    }

}

return{

addUserForm: {

        username: '',

        password: '',

        email: '',

        mobile: ''

      },

 addUserFormRules: {
         email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }

}