el-form中的rules未生效的解决方法

当在使用element-ui的el-form组件中配置rules进行表单验证时，有时会遇到rules未生效的问题。下面我们将介绍几种解决方法。

方法一：手动触发验证

当我们使用el-form组件配合rules进行表单校验时，需要在提交表单时调用validate方法触发表单校验。但有时由于各种原因，validate方法失效，可尝试手动触发验证。

<template>
  <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('校验通过')
          // 提交表单操作
        } else {
          console.log('校验失败')
        }
      })
    },
  }
}
</script>

如果以上代码在提交时未触发表单校验，可尝试在handleSUbmit方法中使用this.$refs.formRef.validate()手动触发表单校验。这样就能保证表单校验的有效性。

方法二：修改rules的prop属性的大小写

在使用el-form组件时，该组件会自动将rules的prop属性转换为小写，而model中属性为大小写敏感。如果在rules中的prop属性在大小写方面与model不一致，则会导致表单校验失败。例如：

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phoneNum">
      <el-input v-model="form.phoneNum"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phoneNum: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('校验通过')
          // 提交表单操作
        } else {
          console.log('校验失败')
        }
      })
    }
  }
}
</script>

以上代码校验phoneNum时校验失败，是因为rules中的prop属性为phoneNum，而model中的属性为phoneNum，大小写存在差异。我们只需将其改为一致即可。

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phonenum">
      <el-input v-model="form.phonenum"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phonenum: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phonenum: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('校验通过')
          // 提交表单操作
        } else {
          console.log('校验失败')
        }
      })
    }
  }
}
</script>

通过以上两种方法，应该能够解决el-form组件中的rules未生效问题。