<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' }]}}

普通方法中使用

checkMobile(value) {

      const regMobile = /^1[34578]\d{9}$/;

      console.log(regMobile.test(value));

      return regMobile.test(value);

    },

复杂的校验

自定义解决方法通过throw error和try catch抛出给组件