ant-desigin-vue中form表单的使用
程序员文章站
2022-06-07 12:11:34
...
form表单的使用
form表单之获取表单的数据
创建表单
- 通过
ant-design-vue
去获取表单的数据是使用v-decorator
的方式去给每个项去注册,这样才能通过组件去拉取表单的数据,同时对必填项做校验;
<template>
<a-form @submit="handleOk" :form="form">
// :form="form" 必须优先注册
<!-- 客户姓名 -->
<a-form-item
:labelCol="labelCol" // 排列样式
:wrapperCol="wrapperCol"
label='客户姓名:'
>
<a-input
v-decorator="[
'name', // 给表单赋值或拉取表单时,该input对应的key
{rules: [{ required: true, message: '请输入客户名称!' }]}
]"
placeholder="请输入客户名称"/>
</a-form-item>
</a-form>
</template>
export default {
data() {
return {
form: this.$form.createForm(this), // 只有这样注册后,才能通过表单拉取数据
}
}
}
拉取表单数据的方法
- 通过
validateFields
的方法,能够校验必填项是否有值,若无,则页面会给出警告!
this.form.validateFields((err, values) => {
if (err) {
// 这里做逻辑处理
console.log(values) // { name: '' }
}
}
清空表单的方法
- 执行
this.form.resetFields()
,则会将表单清空。
给表单赋值
- 值得一提的是,
setFieldsValue
只有通过这种方式给表单赋值,拉取表单的时候才能拉取到值,其他设置默认值的方式,拉取表单时都无法获取到默认值。
this.form.setFieldsValue({
name: '设置值'
})
给表单中添加自定义校验
- 现在给表单添加自定义校验的方式,是从你开始输入时就在校验,讨厌的警告一直存在,知道你输入完整才会消失,个人觉得这种方式不太友好!
<a-form-item
v-bind="formItemLayout"
label="E-mail"
>
<a-input
v-decorator="[
'email',
{
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}]
}
]"
/>
</a-form-item>
- 推荐使用下面的方式做字定义校验,当输入框时去焦点后在去校验是否正确
- 这种方法的思路是,
- 当输入框失去焦点时,校验是否为空同时是否匹配正则
- 给该单个输入框设置错误信息,并在页面给出警告。
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='手机:'
>
<a-input
type="number"
v-decorator="[
'phone',
{
rules: [
{ required: false, message: '请输入手机号码!' },]
},
]"
@blur="validatePhoneBlur"
placeholder='请输入手机号码' />
</a-form-item>
// 校验事件
validatePhoneBlur(e) {
const validatePhoneReg = /^1\d{10}$/
if (e.target.value && !validatePhoneReg.test(e.target.value)) {
const arr = [{
message: '您输入的手机格式不正确!',
field: 'phone',
}]
this.form.setFields({ phone: { value: e.target.value, errors: arr } })
}
},
上一篇: ant-desigin-vue中form表单的使用
下一篇: java函数式编程