ant design of vue 学习之表单Form_ant design vue form rules len max

作者：我家小花儿 | 2024-02-19 15:36:37

踩

ant design vue form rules len max

ant design of vue 学习之表单Form

v-decorator（表单验证，内置绑定，初始值）

1、可通过 v-decorator 进行表单验证

//内置验证规则
<a-form-item label="课程名称"
             v-bind="formItemLayout">
   <a-input placeholder="课程名称"
            v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" />
</a-form-item>
//自定义验证规则01
<a-form-item>
  <a-input size="large"
           type="text"
           placeholder="手机号"
           v-decorator="['mobileNumber', 
           {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
    <a-icon slot="prefix"
            type="mobile"
            :style="{ color: 'rgba(0,0,0,.25)' }" />
  </a-input>
</a-form-item>
//自定义验证规则02
<a-form-item   v-bind="formItemLayout"
	           label="手机号码">
	 <a-input placeholder="手机号码"
	          v-decorator="['mobileNumber',{rules: [{ required: true,max:11,message:'请输入正确格式的手机号码',validator:MobileNumberValidator}]}]" />
</a-form-item>

//在methods中设定方法
// 手机号验证
MobileNumberValidator (rule, value, callback) {
  const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
  if (!idcardReg.test(value)) {
    // eslint-disable-next-line standard/no-callback-literal
    callback('非法格式')
  }
  // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
  callback()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2、可通过 v-decorator 进行内置的双向绑定（详情可看下文的数据获取与填充）

数据填充（所有项）   this.form.setFieldsValue(data)
数据获取（所有项）   this.form.validateFields(async (errors, values) => {
						  console.log(values)
					});
1
2
3
4

3、可通过 v-decorator 的initialValue设置初始值

<a-form-item label="课程名称"
             v-bind="formItemLayout">
   <a-input placeholder="课程名称"
            v-decorator="['name', { initialValue:'姚峰', rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" />
</a-form-item>
1
2
3
4
5

4、下拉选择框的 labelInValue 属性
通常情况下，通过this.form.getFieldValue(“courseTeacherList”)，你只能获取一个数组包含value值，形如[‘7’,‘10’]，而通过labelInValue属性可以得到[{key: “7”,label: “王凤”},{{key: “10”,label: “姚峰”}}]

key 表示value
label 表示显示值

<a-form-item label="教师"
             v-bind="formItemLayout">
  <a-select mode="multiple"
  			labelInValue
            placeholder="请选择教师"
            v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项，请选择教师' }] }]">
	<a-select-option v-for="item in teacherList"
	                 :key="item.id"
	                 :value="item.id">{{ item.name }}</a-select-option>
  </a-select>
</a-form-item>              
1
2
3
4
5
6
7
8
9
10
11

5、type类型检验

Type

    string: Must be of type string. This is the default type.
    number: Must be of type number.
    boolean: Must be of type boolean.
    method: Must be of type function.
    regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
    integer: Must be of type number and an integer.
    float: Must be of type number and a floating point number.
    array: Must be an array as determined by Array.isArray.
    object: Must be of type object and not Array.isArray.
    enum: Value must exist in the enum.
    date: Value must be valid as determined by Date
    url: Must be of type url.
    hex: Must be of type hex.
    email: Must be of type email.
    any: Can be any type.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

数据获取与填充

//获取一个输入控件的值  Function(fieldName: string)
let myDate = this.form.getFieldValue("startDate");

//获取一组输入控件的值，如不传入参数，则获取全部组件的值   Function([fieldNames: string[]])
let value = this.form.getFieldsValue(["startDate","endDate"]);
let value = this.form.getFieldsValue();

//设置一组输入控件的值
this.form.setFieldsValue({
	startDate:res.result["startDate"],
	endDate:res.result["endDate"],
})
//设置一组输入控件的值  加了labelInValue属性
this.form.setFieldsValue({
	userName:{
		label:res.result["userName"],
		key:res.result["userNameId"]
	}
})

//设置表单数据  对日期、下拉框含labelInValue属性的form控件的数据设置要特殊处理才能绑定
//对于日期控件需要将string类型的数据转换moment类型
//对于下拉框含labelInValue属性控件，数据需要转换成key、label的对象格式
import moment from 'moment'
setFormValues (record) {
  // 控制教师
   if (courseTeacherList && courseTeacherList.length > 0) {
     record['courseTeacherList'] = courseTeacherList.map(item => ({
       key: item.teacherId + '',
       label: item.teacherName
     }))
   }
  const fields = ['courseTeacherList', 'certificateNo', 'cardTime', 'termValidity', 'documentStatus', 'remark']
  Object.keys(record).forEach((key) => {
    if (fields.indexOf(key) !== -1) {
      this.form.getFieldDecorator(key)
      const obj = {}
      if (key === 'cardTime' && record['cardTime'] != undefined) {
        obj[key] = moment(data[key], 'YYYY-MM-DD')
      } else {
        obj[key] = record[key]
      }
      this.form.setFieldsValue(obj)
    }
  })
},

//关闭表单清空表单数据
this.form.resetFields();

//提交表单获取数据
//通过this.form.validateFields函数进行表单验证以及数据获取

//对于日期控件，获取的是moment类型数据，需要转换成字符串储存，
//形如values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''
handleSubmit () {
  const { id } = this
  this.form.validateFields((err, values) => {
    if (!err) {
      this.submitLoading = true
      values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''
      // 处理教师
      values.courseTeacherList = values.courseTeacherList.map(item => {
        const obj = {}
        obj.teacherId = Number(item.key)
        return obj
      })
      if (id) {
        // 修改
        updateCourse({ id, ...values }).then(res => {
          if (res.code == 0) {
            this.$message.success('保存成功')
            this.form.resetFields()
            this.$router.back()
          } else {
            this.$message.error('保存失败，请稍后再试')
          }
        }).finally(() => {
          this.submitLoading = false
        })  
    } else {
        // 添加
        addCourse(values).then(res => {
          if (res.code == 0) {
            this.$message.success('保存成功')
            this.form.resetFields()
            this.$router.back()  
          } else {
            this.$message.error('保存失败，请稍后再试')
          }
        }).finally(() => {
          this.submitLoading = false
        })
      }
    }
  })
},    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

表单实例

<template>
  <div>
    <a-card>
      <a-form :form="form">
      	<!-- 文本框 -->
        <a-form-item label="课程名称"
                     v-bind="formItemLayout">
          <a-input placeholder="课程名称"
                   v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项，最大50字符' }] }]" />
        </a-form-item>
        <a-form-item label="教师"
                     v-bind="formItemLayout">
          <a-select mode="multiple"
                    labelInValue
                    placeholder="请选择教师"
                    v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项，请选择教师' }] }]">
            <a-select-option v-for="item in teacherList"
                             :key="item.id"
                             :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 文本域 -->
        <a-form-item label="课程简介"
                     v-bind="formItemLayout">
          <a-textarea placeholder="课程简介"
                      :autosize="{ minRows: 6, maxRows: 10 }"
                      v-decorator="['introduction', { rules: [{ required: true, max: 1000, message: '必填项，最大1000字符' }] }]" />
        </a-form-item>
        <!-- 步进器 -->
        <a-form-item label="时长"
                     v-bind="formItemLayout">
          <a-input-number v-decorator="['timeLength',{initialValue:60,rules:[{required:true,message:'必填'}]}]"
          :min="1"
                          :max="100"
                          :precision="0" />
        </a-form-item>
        <!-- 日期控件 -->
        <a-form-item label="开课日期"
                     v-bind="formItemLayout">
          <a-date-picker v-decorator="['startDate', { rules: [{ type: 'object', required: true, message: '请选择开课日期' }] }]"
                         format="YYYY-MM-DD" />
        </a-form-item>
        <!-- 开关滑块 -->
        <a-form-item label="在线课程"
                     v-bind="formItemLayout">
          <a-switch checkedChildren="是"
                    unCheckedChildren="否"
                     v-decorator="['online', { valuePropName: 'checked', initialValue: true }]" />
        </a-form-item>
        <!-- 单选框 -->
        <a-form-item label="是否发布"
                     v-bind="formItemLayout">
          <a-radio-group name="radioGroup"
          				 v-decorator="['publish', { initialValue: 1 }]">
            <a-radio :value="1">发布</a-radio>
            <a-radio :value="0">不发布</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <a-row>
        <a-col :span="14"
               :offset="5"
               style="text-align: center;">
          <a-button :loading="submitLoading"
          			style="margin-left: 16px"
                    type="primary"
                    @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 16px"
                    @click="back">返回</a-button>
        </a-col>
       </a-row>
    </a-card>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

import moment from 'moment'
import { addCourse, getTeacherList, getCourseById, updateCourse } from '@/api/learning/course'
export default {
  data () {
    return {
      submitLoading: false,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          lg: { span: 7 },
          sm: { span: 7 }
        },
        wrapperCol: {
          lg: { span: 10 },
          sm: { span: 17 }
        }
      },
      teacherList: [],
      unitSn: ''
    }
  },
  created () {
    // 获取教师列表
    this.getTeacherList()
    // 获取详情
    if (this.id) {
      this.getInfo()
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  methods: {
    // 获取教师列表
    getTeacherList () {
      const unitSn = this.unitSn || this.$store.getters.userInfo.unitSn
      const params = {
        current: 1,
        size: -1,
        unitSn
      }
      getTeacherList(params).then(res => {
        if (res.code == 0) {
          if (res.data.records.length > 0) {
            this.teacherList = res.data.records.map(item => {
              const obj = {}
              obj.id = item.id + ''
              obj.name = item.name
              return obj
            })
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取详情 设置表单数据
    getInfo () {
      let { id } = this
      id = Number(id)
      getCourseById(id).then(res => {
        if (res.code == 0) {
          this.setFormValues({ ...res.data })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 设置表单数据
    setFormValues (record) {
      const { courseTeacherList, unitSn } = record
      this.unitSn = unitSn
      // 控制教师
      if (courseTeacherList && courseTeacherList.length > 0) {
        record['courseTeacherList'] = courseTeacherList.map(item => ({
          key: item.teacherId + '',
          label: item.teacherName
        }))
      }
      const fields = ['name', 'courseTeacherList', 'introduction', 'timeLength', 'startDate', 'online', 'publish']
      Object.keys(record).forEach(key => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          const obj = {}
          if (key === 'startDate' && record['startDate'] != undefined) {
            obj[key] = moment(record[key], 'YYYY-MM-DD')
          } else {
            obj[key] = record[key]
          }
          this.form.setFieldsValue(obj)
        }
      })
    },
    // 保存
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const { id } = this
          this.submitLoading = true
          // 处理教师
          values.courseTeacherList = values.courseTeacherList.map(item => {
            const obj = {}
            obj.teacherId = Number(item.key)
            return obj
          })
          // 处理日期
          values.startDate = values.startDate ? values.startDate.format('YYYY-MM-DD') : ''
          if (id) {
            // 修改
            updateCourse({ id, ...values }).then(res => {
              if (res.code == 0) {
                this.$message.success('保存成功')
                this.form.resetFields()
                this.$router.back()
              } else {
                this.$message.error('保存失败，请稍后再试')
              }
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            // 添加
            addCourse(values).then(res => {
              if (res.code == 0) {
                this.$message.success('保存成功')
                this.form.resetFields()
                this.$router.back()
              } else {
                this.$message.error('保存失败，请稍后再试')
              }
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    // 返回
    back () {
      this.$confirm({
        title: '还未保存，是否返回上一级？',
        okText: '确认返回',
        cancelText: '取消',
        onOk: () => {
          this.$router.back()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/115522?site