elemeng-ui 中el-form 表单如何校验

      <el-form :model="form" ref="addUserFormRef" :rules="userfrom">
          <el-form-item prop="username" label="用户名" label-width="80px">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码" label-width="80px">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" label-width="80px">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="手机号" label-width="80px">
            <el-input v-model="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

data里定义规则

 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{
 userfrom: {
        username: [
          { required: true, message: "名字都忘了", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "用户名的长度在2～10个字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "设置个密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "用户密码的长度在6～18个字",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "用户密码的长度在6～18个字",
            trigger: "blur",
          },
           { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "手机号你都不输", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "用户密码的长度在6～18个字",
            trigger: "blur",
          },
           { validator: checkMobile, trigger: "blur" },
        ],
      },
  }
 }

在你点击事件里操作 一般就是提交信息是确然按钮 登录按钮等

  //  validate 检验表单是否通过验证
this.$refs.addUserFormRef.validate(async valid => {
        // console.log(valid)
        // 表单预校验失败
        if (!valid) return
        const { data: res } = await this.$http.post('users', this.addUserForm)
        if (res.meta.status !== 201) {
          this.$message.error('添加用户失败！')
        }
        this.$message.success('添加用户成功！')
        // 隐藏添加用户对话框
        this.addDialogVisible = false
        this.getUserList()
      })

如果一个的话就直接定义

 <el-form :model="form" ref="addUserFormRef" >
          <el-form-item prop="username" label="用户名" label-width="80px"
          :rules="[
                   { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                   { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ]"
             >
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
        
        </el-form>