广州网站制作怎么做,查派网站建设,自媒体官网平台注册,如何打开本地安装的WORDPRESS1/#x1f355;背景 1、表单校验是非常常见的需求#xff0c;能够有效的拦截大部分的错误数据#xff0c;提升效率。 2、快速的给使用者提示和反馈#xff0c;用户体验感非常好。 3、成熟的表单校验框架#xff0c;开发效率高#xff0c;bug少。 最近使用的是vue3antdv的…1/背景 1、表单校验是非常常见的需求能够有效的拦截大部分的错误数据提升效率。 2、快速的给使用者提示和反馈用户体验感非常好。 3、成熟的表单校验框架开发效率高bug少。 最近使用的是vue3antdv的架子仔细探究一下表单校验的问题总结一下。
框架可能不同主要看核心问题如果有帮助欢迎一键三连。【春花秋时知多少】
2/规则配置
首先查看官网的 模版
构建了一个表单大概意思是直接写rules就可以使用了我的目标是这个字段需要长度限制
第一个常见错误rules的位置错误直接在item里面加了rule或者rules 都是无效的需要加在表单上。
注antd文档是在表单项里面配置rules的一般会对比两个组件的文档有时候真的有用 ...a-form-item labelActivity name namename :rules[{ required: true, message: Please input your username! }]a-input v-model:valueformState.name //a-form-item
/a-form上面的写法就是无效的必须要放在 a-form,也就是表格上面不能放在表单项上面。 a-form...:rulesrulesfinishonFinishfinishFailedonFinishFailed.../a-form对应rules绑定位置,使用:rules 绑定对象
那它如何区分是哪个字段的校验规则呢
rules是一个对象对象的属性名对应字段的name名即可(类似map的key)通过key去找规则。
而且对象的值是一个对象数组可以创建多个规则叠加,不用所有规则写到一个对象里面。
const rules {name: [{required: true,message: ass,},],passwd: [{min: 5,message: need,},],
};3/ 规则编写
这个官方只给的例子不是很清楚但是它说本质上是使用的 async-validator
然后看了下大概有这几个点需要注意基本就能完成大部分的规则校验。
1、类型判断比如校验值必须是数字用这个就可以快速限定类型。支持的类型如下
string
number
boolean
method
regexp RegExp
integer
float
array
object
enum
date
url
hex
email
any还支持正则对于对象和数组还可以进一步处理非常方便。
对象可以使用 fields 来限定属性
const descriptor {address: {type: object,required: true,options: { first: true },fields: {street: { type: string, required: true },city: { type: string, required: true },zip: { type: string, required: true, len: 8, message: invalid zip },},},
};数组 可以使用下标位置来限定
const descriptor {roles: {type: array,required: true,len: 3,fields: {0: { type: string, required: true },1: { type: string, required: true },2: { type: string, required: true },},},
};数组还可以使用统一的defaultField 来处理每一个
const descriptor {urls: {type: array,required: true,defaultField: { type: url },},
};2、trigger 指定校验时机
文档上只支持 change(改变) 和 blur(聚焦)就是输入的时候和失去焦点的时候比如提交的时候根据需求选择即可。
经测试默认不处理 是 trigger: change输入校验
可以使用数组来同时满足多个 trigger: [blur, change],
单个 trigger: blur
4/ 校验逻辑错误值为undifined.
本来都写好了发现出现的逻辑不对最简单的例子都实现不了。
const rules {name: [{required: true,message: must need,},{min: 5,message: least 5.,},],
};针对同一个字段两条规则: 第一个规则必填如果没填就提示第一个 第二个规则: 至少5位。 结果只有第一个提示而且一直提示不会消失。
我甚至是怀疑是只有配置了required: true, 才能正常使用显然不是这个表示的是不能为空。即使算输入合法的也会提示根本没有校验逻辑。
后面查了半天还需要配置一个 :modelformState,即需要传递表单对象过去校验表单项的值从这里面取应该是而不能直接获取表单项的值。这个 :model 就是需要把表单对象传递过去。 a-form:modelformState:namestate.formConfig.name:label-col{ span: 6 }:wrapper-col{ span: 8 }:autocompletestate.formConfig.autocomplete:rulesrulesfinishonFinishfinishFailedonFinishFaileda-input v-model:valueitem.value /{{ item.value }}/a-form-item --a-form-item labelActivity name namenamea-input v-model:valueformState.name //a-form-item/a-form
...
const formState reactive({name: ,region: undefined,date1: undefined,delivery: false,type: [],resource: ,desc: ,
});const rules {name: [{required: true,message: must need,},{min: 5,message: least 5.,// trigger: [change, blur],// validator: checkeNickName,},],
};这个问题困扰了我半天写出来希望能帮到大家。
自定义校验器
这个很简单直接写一个自定义校验方法就行了。
然后校验规则里面指定自己的校验方法 validator: checkeNickName, 即可
(注就是用这个方法然后debug出上面的mode未设置的问题自定义方法里面的value一直是undifine,-。-)
const checkeNickName function (rule, value, callback) {console.log(rule, value, callback);if (value) {if (value.length 5) {return Promise.reject(用户昵称长度应小于5个字符);} else {return Promise.resolve();}} else {return Promise.reject(请输入用户昵称);}
};
const rules {name: [{required: true,message: must need,},{min: 5,message: least 5.,validator: checkeNickName,},],
};拿到了值自己怎么处理就好写了成功 返回 return Promise.resolve();
失败返回 return Promise.reject(用户昵称长度应小于5个字符);,里面的参数是提示信息可以自定义
总结
1、规则配置位置要正确大部分问题都是配置错误尽量搞懂每个配置的作用 2、本质上是对async-validator 的封装可以从源头查询问题 3、antdv表单校验需要传递表单对象过去这个是特有的规定按照要求编写。 4、自定义校验只需要写自定义校验方法 function (rule, value, callback),然后在rules的对象里面 使用 validator: checkeNickName, 调用这个方法即可
