当前位置:   article > 正文

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

ant design vue form rules len max

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
推荐阅读
相关标签
  

闽ICP备14008679号