网站建设指数是什么意思,网站群系统建设思路,wordpress 下拉菜单插件,深圳网站设计制需求#xff0c;使用的是iview框架的Form组件#xff0c;一般简单input类型数据#xff0c;使用简单的验证配置就可以达到效果。如官方的写法。
iview 表单验证 地址 https://www.iviewui.com/components/form iview 默认验证库 async-validator 地址 https://github.com/y…需求使用的是iview框架的Form组件一般简单input类型数据使用简单的验证配置就可以达到效果。如官方的写法。
iview 表单验证 地址 https://www.iviewui.com/components/form iview 默认验证库 async-validator 地址 https://github.com/yiminghe/async-validator
ruleValidate: {name: [{ required: true, message: The name cannot be empty, trigger: blur }]
}但是如果要验证数组、或者其他复杂类型的表单数据就需要自定义验证方法。下面以验证DatePicker组件为例。
Form refform :modelform :label-width80 :rulesruleValidateFormItem label活动标题 proptitleInput v-modelform.title placeholder请输入活动标题 //FormItemFormItem label活动时间 propdate_rangeDatePicker v-modelform.date_range typedaterange :optionsdateOptions placementbottom-end placeholder请选择活动时间 stylewidth: 526px/DatePicker/FormItem
/Formdata () {return {form: {// 活动标题title: null,// 活动时间date_range: null,},// 验证条件ruleValidate: {title: [{ required: true, message: 活动标题不能为空, trigger: blur }],date_range: [{ required: true, type: array, message: 活动时间不能为空, trigger: change },{ validator (rule, value, callback, source, options) {const errors []if (value[0] ) { errors.push(活动时间不能为空) }callback(errors)} }]}}
}效果
验证失败 验证成 其实很简单最主要的代码就是自己写validator (rule, value, callback, source, options)的代码。
附加用于单纯的时间验证代码如下
pay_at: [{ required: true, type: date, message: 请选择支付时间, trigger: blur }],
