Solve the problem of English prompts when Vue+Element-UI performs From form verification

Note: This blog is written word by word by the blogger, which is not easy. Please respect the originality, thank you all!

Problem Description

When using the form form, the form fields are often verified. When the fields are required, the required attribute will be added. At this time, it will automatically When defining rules rules, it is necessary to delete the input data in the form input box and when it is empty, an English verification prompt will appear

code show as below:

<el-col :span="12">
  <el-form-item label="用户名" :required="true" prop="name">
    <el-input v-model="temp.name" placeholder="请输入用户名" autocomplete="off" style="width: 80%" />
  </el-form-item>
</el-col>

rules: {
    
    
  name: [{
    
     required: true, message: '请输入用户名！', trigger: 'blur' }],
}

Solution

Just put the required attribute on the el-input element and the problem is solved

<el-col :span="12">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="temp.name" placeholder="请输入用户名" :required="true" autocomplete="off" style="width: 80%" />
  </el-form-item>
</el-col>