element-ui 字段校验target都是什么

在 Element UI 中，字段校验中的 `target` 属性指定要验证的表单控件的选择器。`target` 属性通常用于验证表单中的某个特定字段，而不是整个表单。

例如，如果您想验证一个文本框的内容是否符合要求，您可以在该文本框的 `el-form-item` 元素中使用 `target` 属性来指定该元素的选择器。示例代码如下：

<el-form-item label="用户名" prop="username" :rules="[
  { required: true, message: '请输入用户名', trigger: 'blur' },
  { min: 6, max: 20, message: '用户名长度在 6 到 20 个字符', trigger: 'blur' }
]">
  <el-input v-model="form.username" placeholder="请输入用户名" :name="'username'" :id="'username'" target="input"></el-input>
</el-form-item>

在上面的示例中，`target` 属性被设置为 `"input"`，这意味着该验证规则将应用于 `el-input` 元素的内部输入框。这样，当用户输入不符合要求的内容时，会显示相应的错误消息。

相关问题

el-checkbox-group表单校验

在使用el-checkbox-group进行表单校验时，可以使用element-ui提供的校验规则来实现。首先，需要在data中定义一个rules对象，用来存储校验规则。然后，在el-checkbox-group标签中添加prop属性，指定该字段在校验规则中的名称。接下来，可以在rules对象中添加相应的校验规则，例如required、min等。最后，在el-checkbox-group的父级el-form-item标签中，使用:rules属性绑定校验规则。这样，在提交表单时，就会进行相应的校验，并给出相应的提示信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Element UI 表单【详解】-- 表单校验，表单元素排列在一行，常用表单元素等](https://blog.csdn.net/weixin_41192489/article/details/114286502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选](https://download.csdn.net/download/weixin_42107561/18609162)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

element ui input框 非空验证和只能输入数字校验

Element UI 提供了一个名为 `el-form` 的表单组件套件，其中包括 `el-input` 输入框，可以方便地添加验证功能。对于非空验证和数字输入校验，你可以这样做：

1. **非空验证**：
使用 `v-model` 绑定值，并在 `rules` 属性里设置验证规则，比如：

   <el-form-item label="必填字段">
     <el-input v-model="requiredField" placeholder="请输入内容"></el-input>
     <el-form-item-explain :show="!requiredField">此项不能为空</el-form-item-explain>
   </el-form-item>

然后在数据对象中声明这个字段并配置其是否必填：

   data() {
     return {
       requiredField: ''
     },
   },
   methods: {
     validateRequired() {
       this.$refs['requiredField'].$validate();
     }
   }

当输入为空时，`validateRequired` 方法会被触发，显示错误提示。

2. **只允许输入数字的验证**：
可以借助 Vue 的 `input` 事件监听输入变化，然后检查输入的内容是否全为数字：

   <el-input type="number" v-model.number="numericField" @input="checkNumericInput"></el-input>

   methods: {
     checkNumericInput(e) {
       if (!/^\d*$/.test(e.target.value)) { // 使用正则表达式检查是否全为数字
         e.target.value = e.target.value.slice(0, -1); // 清除非数字字符
       }
     }
   }

如果用户输入了非数字字符，`checkNumericInput` 方法会清除该字符。