配置表单 *号提示 英文加数字校验

<!-- 主数据集成配置页 -->
<template>
  <div>
    <!-- 整体min位置 -->
    <div class="divmin">
      <!-- 基础参数配置表单部分 -->
      <el-form ref="form" :model="form" label-width="80px" size="mini" hide-required-asterisk>
        <!-- 基础参数配置 -->
        <div>
        <h2 class="table-cell">基础参数配置</h2>
        <!-- 人员库 -->
        <el-form-item label="人员库" prop="staff"
        :rules="[
          { required: true, message: '人员库不能为空' },
          { pattern: /^[A-Za-z]+$/, message: '请输入英文字母' }
        ]">
          <el-tooltip effect="dark" content="添加人员库，如果有多个库，中间以英文逗号隔开" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-input v-model="form.staff" size="mini" style="width: 550px;" class="inputleft"></el-input>
        </el-form-item>
        <!-- 交互方式 -->
        <el-form-item label="交互方式" :required="true">
          <el-tooltip effect="dark" content="选择接口推送方式，是推送还是其他平台调用接口" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-radio-group v-model="form.resource" style="width: 550px;margin-left: 25px;">
            <el-radio label="推送方" class="inputleft"></el-radio>
            <el-radio label="调用方"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 同步标识 -->
        <el-form-item label="同步标识" prop="identifying"
        :rules="[
          { required: true, message: '同步标识不能为空' },
          { pattern: /^[A-Za-z]+$/, message: '请输入英文字母' }
        ]">
          <el-tooltip effect="dark" content="需以英文字母填写" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-input v-model="form.identifying" size="mini" style="width: 550px;" class="inputleft"></el-input>
        </el-form-item>
        <!-- 单批对接数据数量 -->
        <el-form-item label="对接量" prop="DockingQuantity"
        :rules="[
          { validator: checkDockingQuantity, }
        ]">
          <el-tooltip effect="dark" content="需以数字填写,不填不计数量" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-input v-model.number="form.DockingQuantity" size="mini" style="width: 550px;" class="inputleft"></el-input>
        </el-form-item>
        </div>
        <!-- 人员指标参数配置 -->
        <div>
          <h2 class="table-cell">人员指标参数配置</h2>
          
        </div>
        <!-- 表单按钮 -->
        <el-form-item >
          <el-button type="primary" size="mini" @click="onSubmit">保存</el-button>
          <el-button size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 人员指标参数配置 -->
    <div class="divmin2">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
          name: '',
          delivery: false,
          identifying: '',
          DockingQuantity: '',
        },
    };
  },
  methods: {
      onSubmit() {
        console.log('submit!');
      },
      // 数字校验
      checkDockingQuantity(rule, value, callback) {
        if (value !== '' && isNaN(value)) {
          callback(new Error('对接量必须填数字'));
        } else {
          callback();
        }
      }
    }
}
</script>

<style scoped lang="less">
.divmin {
  max-width: 900px;
  margin: auto;
  border: 1px solid #e0dede; /* 添加外部边框 */
  padding: 16px;
}
/* 下边框线 */
.table-cell {
  color: #8c8b8b;
  padding-bottom:6px;
  margin-bottom:20px;
  border-bottom: 1px solid #e5e2e2;
}
/* vue深度选择器 */
::v-deep{
  .el-form-item__label{ /* 基础参数配置中内容距离左边 */
    margin-left: 20px;
  }
  .is-required .el-form-item__label::after { /* 红星 */
    content: "*";
    color: #ff0000;
    margin-left: 4px;
  }
  .el-form-item--mini .el-form-item__error{ /* 校验提示位置 */
    margin-left: 40px;
  }
}
/* 图标变淡 */
.el-icon-question{
  color: #bfbcbc;
}
/* input距离左边距离 */
.inputleft{
  left: 4px;
}
</style>