Ant Design antdv Vue表单验证rangePicker

最新推荐文章于 2025-05-29 11:08:50 发布

原创最新推荐文章于 2025-05-29 11:08:50 发布 · 935 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端同时被 2 个专栏收录

143 篇文章

订阅专栏

Vue.js

9 篇文章

订阅专栏

本文介绍了在Vue3中使用AntDesign组件库进行表单验证，特别是针对rangePicker的时间段选择器和图片上传功能的实现。通过自定义验证规则确保运输时间和图片上传的必填性，并展示了相关代码片段。强调了表单元素的name属性与rules对象的对应关系，以及组件的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ant Design antdv Vue3 表单验证rangePicker，验证图片上传


  setup(props,context) {
    let formState = reactive({} as FormState);
    const formRef = ref<FormInstance>();
    let validateRangePicker = async (_rule: Rule, value: any) => {
      if (!value[0] || !value[1]) {
        return Promise.reject('请填写运输时间');
      } else {
        return Promise.resolve();
      }
    };


const rules: Record<string, Rule[]> = {

      rangePicker: [{ type: 'array', required: true,  validator: validateRangePicker, trigger: 'blur' }],
      
      fileList: [{  required: true,  message: '请上传车载物图片', trigger: 'blur' }],
    };|

....
....


return {
      formRef,
      rules,
......





  <a-form-item ref="rangePicker" label="运输时间" name="rangePicker">
          <a-range-picker
            v-model:value="formState.rangePicker"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :disabled="disabled"
          />
        </a-form-item>


// 这里重点就是name 要和rules 对应起来 相当于id
 <a-form-item label="照片" name="fileList">
          <a-upload
            v-model:file-list="fileList"
            :disabled="disabled"

大概代码就是这样的，懂得一看就明白了。不懂的怎么说也白搭

antdesign vue 用的人是真少