el-input在行内做校验

可以使用 `rules` 属性来对 `el-input` 进行校验，同时设置 `inline` 属性使其在行内显示校验结果。示例代码如下：

<el-input v-model="inputValue" :rules="[{required: true, message: '请输入内容', trigger: 'blur'}]" inline></el-input>

`rules` 属性是一个数组，数组中的每个元素都是一个对象，对象中的属性表示校验规则。`inline` 属性用于将校验结果直接显示在输入框后面，而不是在输入框下方显示提示信息。当输入框失去焦点或者提交表单时，校验结果会自动显示。

相关问题

el-input-number表单校验

对于 el-input-number 组件的表单校验，你可以使用 Element UI 提供的表单验证规则（rules）来实现。下面是一个简单的示例：

首先，你需要在 data 中定义一个表单校验规则：

data() {
  return {
    rules: {
      // 输入不能为空
      required: [
        { required: true, message: '该字段不能为空', trigger: 'blur' }
      ],
      // 输入必须是数字
      number: [
        { type: 'number', message: '请输入数字', trigger: 'blur' }
      ],
      // 输入必须在一定范围内
      range: [
        { type: 'number', min: 1, max: 100, message: '请输入1到100之间的数字', trigger: 'blur' }
      ]
    }
  }
}

然后，在 el-input-number 组件上使用这些规则：

<el-form :model="form" ref="form" :rules="rules">
  <el-form-item label="数字" prop="number">
    <el-input-number v-model="form.number" :min="1" :max="100"></el-input-number>
  </el-form-item>
</el-form>

最后，在提交表单时进行校验：

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单校验通过，进行提交操作
      } else {
        // 表单校验不通过
      }
    });
  }
}

这样，当用户在 el-input-number 输入框中输入内容时，会根据定义的规则进行校验，并在校验不通过时显示相应的提示信息。

希望能对你有所帮助！如果还有其他问题，请随时提问。

el-input 手机号正则校验

根据提供的引用内容，el-input的手机号正则校验可以通过在Vue的data中定义一个phoneNumber的验证函数，并在rules中使用该验证函数进行校验。具体的实现步骤如下：

1. 在Vue的data中定义一个phoneNumber的验证函数，该函数接收三个参数：rule, value, callback。其中，rule是验证规则，value是输入的手机号码，callback是回调函数。
2. 在phoneNumber函数中，使用正则表达式对手机号进行验证。如果手机号为空，则通过callback函数返回一个错误信息，提示用户输入手机号。如果手机号不符合正则表达式的规则，则同样通过callback函数返回一个错误信息，提示用户输入正确的手机号。如果手机号符合正则表达式的规则，则通过callback函数返回一个空值，表示验证通过。
3. 在Vue的rules中，对phone字段进行校验。使用validator属性指定phoneNumber函数作为验证函数，并设置message属性为"请输入正确的手机号"，trigger属性为"blur"，表示在失去焦点时进行校验。
4. 在el-input组件中，使用v-model指令绑定ruleForm.phone字段，将输入的手机号码与Vue的data中的phone字段进行双向绑定。
5. 在el-form组件中，使用:rules属性将rules绑定到el-form组件上，实现手机号的正则校验。

综上所述，可以通过以上步骤实现el-input的手机号正则校验。
#### 引用[.reference_title]
- *1* *2* [el-form-item中的el-input加上正则校验](https://blog.csdn.net/m0_58266149/article/details/126954372)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-input手机号，座机号，邮箱，银行卡，邮编，传真验证](https://blog.csdn.net/csdnyp/article/details/118762677)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]