element自定义邮箱和手机号校验规则

原创已于 2023-02-22 11:10:50 修改 · 3.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #vue.js

于 2022-05-13 18:37:41 首次发布

本文介绍了在前端开发中实现表单验证的方法，包括邮箱和手机号的正则验证，以及自定义验证规则。通过Vue.js的el-form组件，展示了如何设置验证规则并在组件中调用这些规则确保输入的合法性。此外，还提供了普通方法中验证和复杂校验的解决方案。

<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抛出给组件