Jst UI

# Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

# 典型表单

包括各种表单项，比如输入框、选择器、单选框、多选框等。

-

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，可放置各种类型的表单控件

<j-form ref="formRef" :model="formData">
  <j-form-item label="商品ID" prop="itemId">
    <j-input v-model="formData.itemId" type="text" />
  </j-form-item>
  <j-form-item label="skuId" prop="skuId">
    <j-input v-model="formData.skuId" type="text" />
  </j-form-item>
  <j-form-item label="尺码" prop="num">
    <label>
      <input v-model="formData.num" type="radio" value="xl"/>xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="2xl"/>2xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="3xl"/>3xl
    </label>
  </j-form-item>
  <j-form-item label="支持快递" prop="express">
    <label>
      <input v-model="formData.express" type="checkbox" value="sf"/>
      <span>顺丰</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="zt"/>
      <span>中通</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="yt"/>
      <span>圆通</span>
    </label>
  </j-form-item>
  <j-form-item label="所属平台" prop="platformId">
    <j-select v-model="formData.platformId">
      <j-option value="shoppe" />
      <j-option value="tiktok1">tiktok1</j-option>
      <j-option value="tiktok2.1" label="tiktok2" />
      <j-option value="tiktok3.1">tiktok3</j-option>
    </j-select>
  </j-form-item>
  <j-form-item label="活动时间">
    <div class="j-flex-aCenter">
      <j-col :span="11">
        <j-form-item prop="date1">
          <j-date-picker v-model="formData.date1" type="date" placeholder="开始日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
      <j-col class="tCenter" :span="2">-</j-col>
      <j-col :span="11">
        <j-form-item prop="date2">
          <j-date-picker v-model="formData.date2" placeholder="结束日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
    </div>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="omSubmit">提交</j-button>
    <j-button @click="onReset">重置</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        formData: {
          itemId: '1',
          skuId: '',
          num: '',
          express: [],
          platformId: '',
          date1:'',
          date2:''
        },
      }
    },
    methods: {
      omSubmit()
      {
        console.log(this.formData);
      },
      onReset()
      {
        this.$refs.formRef.resetFields();
      }
    }
  }
</script>
显示代码 复制代码

# 行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

-

设置 inline 属性可以让表单域变为行内的表单域

<j-form ref="formRef3" :model="formData2" inline>
  <j-form-item prop="itemId">
    <j-input v-model="formData2.itemId" type="text" placeholder="请输入商品ID" />
  </j-form-item>
  <j-form-item prop="skuId" >
    <j-input v-model="formData2.skuId" type="text" placeholder="请输入skuId" />
  </j-form-item>
  <j-form-item prop="platformId" >
    <j-select v-model="formData2.platformId" placeholder="请选择平台">
      <j-option value="shoppe" />
      <j-option value="tiktok1">tiktok1</j-option>
      <j-option value="tiktok2.1" label="tiktok2" />
      <j-option value="tiktok3.1">tiktok3</j-option>
    </j-select>
  </j-form-item>
  <j-form-item>
    <div class="j-flex-aCenter">
      <j-col :span="11">
        <j-form-item prop="date1">
          <j-date-picker v-model="formData2.date1" type="date" placeholder="开始日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
      <j-col class="tCenter" :span="2">-</j-col>
      <j-col :span="11">
        <j-form-item prop="date2">
          <j-date-picker v-model="formData2.date2" placeholder="结束日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
    </div>
  </j-form-item>
  <j-form-item>
    <j-button type="primary">查询</j-button>
    <j-button @click="$refs.formRef3.resetFields()">重置</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        formData2: {
          itemId: '',
          skuId: '',
          num: '',
          express: [],
          platformId: '',
          date1:'',
          date2:''
        },
      }
    },
    methods: {
    }
  }
</script>
显示代码 复制代码

# 对齐方式

根据具体目标和制约因素，选择最佳的标签对齐方式。

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

<label>
  <input type="radio" v-model="labelPosition" value="left"/>
  左对齐
</label>
<label>
  <input type="radio" v-model="labelPosition" value="right"/>
  右对齐
</label>
<label>
  <input type="radio" v-model="labelPosition" value="top"/>
  顶部对齐
</label>
<div style="margin: 20px;"></div>
<j-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
  <j-form-item label="名称">
    <j-input v-model="formLabelAlign.name"></j-input>
  </j-form-item>
  <j-form-item label="活动区域">
    <j-input v-model="formLabelAlign.region"></j-input>
  </j-form-item>
  <j-form-item label="活动形式">
    <j-input v-model="formLabelAlign.type"></j-input>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
      };
    }
  }
</script>
显示代码 复制代码

# 表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

-

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator (opens new window),

<j-form ref="formRef" :model="formData" :rules="rules">
  <j-form-item label="商品ID" prop="itemId" required>
    <j-input v-model="formData.itemId" type="text" />
  </j-form-item>
  <j-form-item label="skuId" prop="skuId" required>
    <j-input v-model="formData.skuId" type="text"  />
  </j-form-item>
  <j-form-item label="尺码" prop="num" required> 
    <label>
      <input v-model="formData.num" type="radio" value="xl" @change="formChange('formRef','num')" />xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="2xl" @change="formChange('formRef','num')" />2xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="3xl" @change="formChange('formRef','num')" />3xl
    </label>
  </j-form-item>
  <j-form-item label="支持快递" prop="express" required>
    <label>
      <input v-model="formData.express" type="checkbox" value="sf" @change="formChange('formRef','express')" />
      <span>顺丰</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="zt" @change="formChange('formRef','express')" />
      <span>中通</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="yt" @change="formChange('formRef','express')" />
      <span>圆通</span>
    </label>
  </j-form-item>
  <j-form-item label="所属平台" prop="platformId">
    <j-select v-model="formData.platformId">
      <j-option value="shoppe" />
      <j-option value="tiktok1">tiktok1</j-option>
      <j-option value="tiktok2.1" label="tiktok2" />
      <j-option value="tiktok3.1">tiktok3</j-option>
    </j-select>
  </j-form-item>
  <j-form-item label="活动时间" required>
    <div class="j-flex-aCenter">
      <j-col :span="11">
        <j-form-item prop="date1">
          <j-date-picker v-model="formData.date1" type="date" placeholder="开始日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
      <j-col class="tCenter" :span="2">-</j-col>
      <j-col :span="11">
        <j-form-item prop="date2">
          <j-date-picker v-model="formData.date2" placeholder="结束日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
    </div>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="omSubmit">提交</j-button>
    <j-button @click="onReset">重置</j-button>
    <j-button class="success" @click="onClear">清除</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        rules: {
          skuId: { min: 3, max: 5, message: '长度在 3 到 5 个字符'},
          platformId: { validator: this.checkNum}
        },
        formData: {
          itemId: '1',
          skuId: '',
          num: '',
          express: [],
          platformId: '',
          date1:'',
          date2:''
        },
      }
    },
    methods: {
      checkNum(rule, value, callback)
      {
        if (!value)
        {
          return callback(new Error('请选择平台！'));
        }
        if (value === 'tiktok2.1')
        {
          callback(new Error('不能选择tiktok2.1'));
        }
        else
        {
          callback();
        }
      },
      omSubmit()
      {
        this.$refs.formRef.validate((res) =>
        {
          if (res)
          {
            console.log('校验通过');
          }
          else
          {
            console.log('校验失败');
          }
        });
      },
      formChange(ref, ele)
      {
        this.$refs[ref].validateField(ele);
      },
      onClear()
      {
        this.$refs.formRef.clearValidate();
      },
      onReset()
      {
        this.$refs.formRef.resetFields();
      }
    }
  }
</script>
显示代码 复制代码

TIP

若只关心是否校验，则添加required属性即可，message及trigger均有默认值 required可动态控制当前是否校验 message默认值：输入框：请输入+label，其余：请选择+label，涉及多选：请至少选择一个+label trigger默认值：输入框：blur，其余：change，可选值：all(blur，change均触发)

# 表单验证-是否生效

可动态开关单项校验

-

若只关心是否校验，则添加required属性即可，message及trigger均有默认值

<j-form ref="formRef" :model="formData" :rules="rules">
  <j-form-item label="商品ID" prop="itemId" required>
    <j-input v-model="formData.itemId" type="text" />
  </j-form-item>
  <j-form-item label="skuId" prop="skuId" :required="skuIdHasValidate">
    <j-input v-model="formData.skuId" type="text"  /> 
    <label>
      <input v-model="skuIdHasValidate" type="checkbox"/>
      <span>验证</span>
    </label>
  </j-form-item>
  <j-form-item label="尺码" prop="num" required> 
    <label>
      <input v-model="formData.num" type="radio" value="xl" @change="formChange('formRef','num')" />xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="2xl" @change="formChange('formRef','num')" />2xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="3xl" @change="formChange('formRef','num')" />3xl
    </label>
  </j-form-item>
  <j-form-item label="支持快递" prop="express" required>
    <label>
      <input v-model="formData.express" type="checkbox" value="sf" @change="formChange('formRef','express')" />
      <span>顺丰</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="zt" @change="formChange('formRef','express')" />
      <span>中通</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="yt" @change="formChange('formRef','express')" />
      <span>圆通</span>
    </label>
  </j-form-item>
  <j-form-item label="所属平台" prop="platformId">
    <j-select v-model="formData.platformId">
      <j-option value="shoppe" />
      <j-option value="tiktok1">tiktok1</j-option>
      <j-option value="tiktok2.1" label="tiktok2" />
      <j-option value="tiktok3.1">tiktok3</j-option>
    </j-select>
    <label>
      <input v-model="platformIdValidate" type="checkbox"/>
      <span>验证</span>
    </label>
  </j-form-item>
  <j-form-item label="活动时间" :required="platformIdValidate">
    <div class="j-flex-aCenter">
      <j-col :span="11">
        <j-form-item prop="date1">
          <j-date-picker v-model="formData.date1" type="date" placeholder="开始日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
      <j-col class="tCenter" :span="2">-</j-col>
      <j-col :span="11">
        <j-form-item prop="date2">
          <j-date-picker v-model="formData.date2" placeholder="结束日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
    </div>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="omSubmit">提交</j-button>
    <j-button @click="onReset">重置</j-button>
    <j-button class="success" @click="onClear">清除</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        skuIdHasValidate:true,
        platformIdValidate:true,
        formData: {
          itemId: '1',
          skuId: '',
          num: '',
          express: [],
          platformId: '',
          date1:'',
          date2:''
        },
      }
    },
    computed:{
      rules(){
        return {
          skuId: { min: 3, max: 5, message: '长度在 3 到 5 个字符'},
          platformId: { validator: this.checkNum,enable:this.platformIdValidate}
        }
      }
    },
    methods: {
      checkNum(rule, value, callback)
      {
        if (!value)
        {
          return callback(new Error('请选择平台！'));
        }
        if (value === 'tiktok2.1')
        {
          callback(new Error('不能选择tiktok2.1'));
        }
        else
        {
          callback();
        }
      },
      omSubmit()
      {
        this.$refs.formRef.validate((res) =>
        {
          if (res)
          {
            console.log('校验通过');
          }
          else
          {
            console.log('校验失败');
          }
        });
      },
      formChange(ref, ele)
      {
        this.$refs[ref].validateField(ele);
      },
      onClear()
      {
        this.$refs.formRef.clearValidate();
      },
      onReset()
      {
        this.$refs.formRef.resetFields();
      }
    }
  }
</script>
显示代码 复制代码

# 表单验证-错误信息行内显示

行间距紧凑型，可更多的展示表单

-

通过设置inline-message达到错误信息行显示的效果，但暂不支持设置inline的表单

<j-form ref="formRef" :model="formData" :rules="rules" inline-message label-width="120px" style="width:580px">
  <j-form-item label="商品ID" prop="itemId">
    <j-input v-model="formData.itemId" type="text" />
  </j-form-item>
  <j-form-item label="skuId" prop="skuId">
    <j-input v-model="formData.skuId" type="text" />
  </j-form-item>
  <j-form-item label="尺码" prop="num">
    <label>
      <input v-model="formData.num" type="radio" value="xl" @change="formChange('formRef','num')" />xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="2xl" @change="formChange('formRef','num')" />2xl
    </label>
    <label>
      <input v-model="formData.num" type="radio" value="3xl" @change="formChange('formRef','num')" />3xl
    </label>
  </j-form-item>
  <j-form-item label="支持快递" prop="express">
    <label>
      <input v-model="formData.express" type="checkbox" value="sf" @change="formChange('formRef','express')" />
      <span>顺丰</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="zt" @change="formChange('formRef','express')" />
      <span>中通</span>
    </label>
    <label>
      <input v-model="formData.express" type="checkbox" value="yt" @change="formChange('formRef','express')" />
      <span>圆通</span>
    </label>
  </j-form-item>
  <j-form-item label="所属平台" prop="platformId">
    <j-select v-model="formData.platformId">
      <j-option value="shoppe" />
      <j-option value="tiktok1">tiktok1</j-option>
      <j-option value="tiktok2.1" label="tiktok2" />
      <j-option value="tiktok3.1">tiktok3</j-option>
    </j-select>
  </j-form-item>
  <j-form-item label="活动时间" required>
    <div class="j-flex-aCenter">
      <j-col :span="11">
        <j-form-item prop="date1">
          <j-date-picker v-model="formData.date1" type="date" placeholder="开始日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
      <j-col class="tCenter" :span="2">-</j-col>
      <j-col :span="11">
        <j-form-item prop="date2">
          <j-date-picker v-model="formData.date2" placeholder="结束日期" style="width: 100%;" />
        </j-form-item>
      </j-col>
    </div>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="omSubmit">提交</j-button>
    <j-button @click="onReset">重置</j-button>
    <j-button class="success" @click="onClear">清除</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        rules: {
          itemId: { required: true, message: '请输入商品ID', trigger: 'blur' },
          skuId: [{ required: true, message: '请输入skuId', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
          num: { required: true, message: '请选择尺码', trigger: 'change' },
          express: { required: true, message: '请至少选择一个', trigger: 'change' },
          platformId: { validator: this.checkNum, trigger: 'change' }
        },
        formData: {
          itemId: '1',
          skuId: '',
          num: '',
          express: [],
          platformId: '',
          date1:'',
          date2:''
        },
      }
    },
    methods: {
      checkNum(rule, value, callback)
      {
        if (!value)
        {
          return callback(new Error('请选择平台！'));
        }
        if (value === 'tiktok2.1')
        {
          callback(new Error('不能选择tiktok2.1'));
        }
        else
        {
          callback();
        }
      },
      omSubmit()
      {
        this.$refs.formRef.validate((res) =>
        {
          if (res)
          {
            console.log('校验通过');
          }
          else
          {
            console.log('校验失败');
          }
        });
      },
      formChange(ref, ele)
      {
        this.$refs[ref].validateField(ele);
      },
      onClear()
      {
        this.$refs.formRef.clearValidate();
      },
      onReset()
      {
        this.$refs.formRef.resetFields();
      }
    }
  }
</script>
显示代码 复制代码

# 自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。

<j-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <j-form-item label="密码" prop="pass">
    <j-input type="password" v-model="ruleForm.pass" autocomplete="off"></j-input>
  </j-form-item>
  <j-form-item label="确认密码" prop="checkPass">
    <j-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></j-input>
  </j-form-item>
  <j-form-item label="年龄" prop="age">
    <j-input v-model.number="ruleForm.age"></j-input>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="submitForm('ruleForm')">提交</j-button>
    <j-button @click="resetForm('ruleForm')">重置</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
显示代码 复制代码

TIP

自定义校验 callback 必须被调用。 更多高级用法可参考 async-validator (opens new window)。

# 动态增减表单项

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

<j-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <j-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <j-input v-model="dynamicValidateForm.email"></j-input>
  </j-form-item>
  <j-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <j-input v-model="domain.value"></j-input> <j-button @click.prevent="removeDomain(domain)" style="margin-left:5px">删除</j-button>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="submitForm('dynamicValidateForm')">提交</j-button>
    <j-button @click="addDomain">新增域名</j-button>
    <j-button @click="resetForm('dynamicValidateForm')">重置</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>
显示代码 复制代码

# 数字类型验证

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

<j-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <j-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <j-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></j-input>
  </j-form-item>
  <j-form-item>
    <j-button type="primary" @click="submitForm('numberValidateForm')">提交</j-button>
    <j-button @click="resetForm('numberValidateForm')">重置</j-button>
  </j-form-item>
</j-form>
<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
显示代码 复制代码

TIP

嵌套在 j-form-item 中的 j-form-item 标签宽度默认为零，不会继承 j-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

# Form Attributes

参数 说明 类型 可选值 默认值
model 表单数据对象 object — —
rules 表单验证规则,详见下方rules object — —
inline 行内表单模式 boolean — false
label-width 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 string — —
inline-message 是否以行内形式展示校验信息 boolean — false
disabled 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 boolean — false

# Form Methods

方法名 说明 参数
validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise Function(callback: Function(boolean, object))
validateField 对部分表单字段进行校验的方法 Function(props: array | string, callback: Function(errorMessage: string))
resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 —
clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 Function(props: array | string)

# Form Events

事件名称 说明 回调参数
validate 任一表单项被校验后触发 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）

# Form-Item Attributes

参数 说明 类型 可选值 默认值
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 string 传入 Form 组件的 model 中的字段 —
label 标签文本 string — —
label-width 表单域标签的的宽度，例如 '50px'。支持 auto。 string — —
required 是否必填，如不设置，则会根据校验规则自动生成 boolean — false
rules 表单验证规则,详见下方rules object — —
inline-message 以行内形式展示校验信息 boolean — false

# Form-Item Slot

name 说明
— Form Item 的内容
label 标签文本的内容

# Form-Item Scoped Slot

name 说明
error 自定义表单校验信息的显示方式，参数为 { error }

# rules

支持类型Object,Array,多个时传入数组

参数 说明 类型 可选值 默认值
required 是否必填 Boolean — false
message 错误信息提示文案 string — 输入框:请输入+label\单选(多选):请选择/请至少选择+label
trigger 触发校验方式 string blur/change/all(任何情况) 输入框:blur,其余:change
validator 自定义校验规则 function — —
enable 是否启用 function — -

← Tabs 标签页 →