由于公司项目快速开发需求,需要使用到iview组件库的Form组件,但是默认的表单验证不太能够满足相对复杂一些的验证需求,然后只能求助官方文档(太杂了,没看看明白)和度娘(度娘简单粗暴,再不行谷歌)。
自定义的表单验证如下,没什么太需要注意的,只要用过iview的应该能看明白,直接贴代码:
<FormItem label="分类:" prop="MenuClassifyId">
<Select v-model="formItem.MenuClassifyId">
<Option :value="11">1111</Option>
<Option :value="22">222</Option>
</Select>
</FormItem
在vue中data(){}写验证函数。官网有案例:https://www.iviewui.com/components/form
export default {
data () {
var that=this
const validateMenuClassifyId = (rule, value, callback) => {
console.log("单个表单验证")
console.log(value) //value是对应的ormItem.MenuClassifyId值
if (value === ''||value ===0) { //写逻辑从而达到验证值
callback(new Error('请选择分类!')); //callback()暂时理解为回调,验证后回调给界面的信息
} else {
callback(); //默认回调,没有异常值
}
};
在form中的验证调用2的函数。
MenuClassifyId:[
//required显示*号,validator验证回到的函数,validateMenuClassifyId自定义验证函数,
//trigger暂时理解为验证值是否为空
{ required: true,validator: validateMenuClassifyId, trigger: 'blur' }
],