element中复合型输入框加入校验代码

可以使用 element-ui 中的表单验证来实现复合型输入框的校验。

1. 首先，在模板中使用 element-ui 提供的表单组件，例如 `el-form`、`el-input`、`el-button` 等。

2. 接着，给需要校验的输入框绑定 `rules` 属性，该属性是一个数组，用于存放校验规则。例如：

   <el-form ref="form" :model="form">
     <el-form-item label="用户名" prop="username">
       <el-input v-model="form.username" :rules="usernameRules"></el-input>
     </el-form-item>
     <el-form-item label="密码" prop="password">
       <el-input v-model="form.password" :rules="passwordRules" type="password"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submitForm">提交</el-button>
     </el-form-item>
   </el-form>

3. 在组件的 `data` 中定义校验规则，例如：

   data() {
     return {
       form: {
         username: '',
         password: ''
       },
       usernameRules: [
         { required: true, message: '用户名不能为空', trigger: 'blur' },
         { min: 6, max: 20, message: '用户名长度在 6 到 20 个字符', trigger: 'blur' }
       ],
       passwordRules: [
         { required: true, message: '密码不能为空', trigger: 'blur' },
         { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
       ]
     }
   }

4. 在组件的 `methods` 中定义提交表单的方法，例如：

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

在提交表单时，使用 `this.$refs.form.validate()` 方法进行校验，该方法会返回一个 Boolean 值，表示表单校验是否通过。如果校验不通过，可以使用 `this.$message.error()` 方法提示错误信息。

以上就是使用 element-ui 实现复合型输入框校验的基本步骤。需要注意的是，上述示例中的校验规则只是一个简单的示例，具体的校验规则可以根据实际需求进行定义。