vue @vuelidate父子组件绑定注意事项
作者：坚定信念，勇往无前
Vue@vuelidate父子组件验证时,不能直接绑定,需在子组件验证方法内部进行绑定,以避免父组件验证时包含子组件的验证
vue @vuelidate父子组件绑定注意
如果父子组件都有验证的，不能这样写
const V2$ = useVuelidate(rules, formdata)
const submitBtn = async () => {
const V2$ = useVuelidate(rules, formdata)如果这样写的话，在父组件验证时，也会把子组件的验证代上。
正确写法
const submitBtn = async () => {
const V2$ = useVuelidate(rules, formdata)
let validate =await V2$.value.$validate()要在自己验证的方法内部进行绑定
Vuelidate表单验证规则
Vuelidate中的必填验证规则
用到的技术 vue + quasar + vuelidate(网址)
引用方法如下：
Vue.use(window.vuelidate.default)
var minLength = window.validators.minLength
var required = window.validators.required
var requiredIf = window.validators.requiredIf
var email = window.validators.email
var helpers = window.validators.helpers
validations: {
baseInfoForm: {
mobilePhone:{ required: required },
col19:{ required: required },
kitchenTime:{ required: requiredIf(function(baseInfoForm) {
return baseInfoForm.col19 == 'Y'
//当col19的值为Y时,才有kitchenTime的验证
})}
}
一个简单的例子：
<q-field
icon="stay_primary_portrait"
:error="readonly == false? $v.baseInfoForm.mobilePhone.$error: false"
error-label="手机号码不能为空" //警告提示信息
class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<q-input
:readonly="readonly"
@blur="$v.baseInfoForm.mobilePhone.$touch"
:float-label="$t('手机号码')"
type="number"
v-model="baseInfoForm.mobilePhone"></q-input>
</q-field>
<q-field
v-if="baseInfoForm.col19 == 'Y' "
icon="access_time"
:error="readonly == false? $v.baseInfoForm.kitchenTime.$error: false"
error-label="进入厨电行业时间不能为空"
class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<q-datetime
type="date"
format="YYYY-MM-DD"
format-model="string"
:float-label="$t('若是,进入厨电行业时间')"
@blur="$v.baseInfoForm.kitchenTime.$touch"
v-model="baseInfoForm.kitchenTime"></q-datetime>
</q-field>效果如下：
具体代码实现如下：
<div id="q-supplierBaseInfo" v-cloak>
<q-field
icon="stay_primary_portrait"
:error="readonly == false? $v.baseInfoForm.mobilePhone.$error: false"
error-label="手机号码不能为空"
class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<q-input
:readonly="readonly"
@blur="$v.baseInfoForm.mobilePhone.$touch"
:float-label="$t('手机号码')"
type="number"
v-model="baseInfoForm.mobilePhone"></q-input>
</q-field>
<q-field
icon="work"
:error="readonly == false? $v.baseInfoForm.col19.$error: false"
error-label="是否为供应商不能为空"
class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<q-select
@blur="$v.baseInfoForm.col19.$touch"
:float-label="$t('是否为供应商')"
:options="col19Options"
v-model="baseInfoForm.col19"></q-select>
</q-field>
</div>
<script>
// quasar components use
Quasar.i18n.set(Quasar.i18n[LANGUGE])
Vue.use(window.vuelidate.default)
var minLength = window.validators.minLength
var required = window.validators.required
var requiredIf = window.validators.requiredIf
var helpers = window.validators.helpers
var supplierInvite = new Vue({
el: '#q-supplierBaseInfo',
i18n: i18n,
data: function() {
return {
col19Options:[
{
label: '是',
value: 'Y'
},
{
label: '否',
value: 'N'
}
],
baseInfoForm: { col19:''}
},
validations: {
baseInfoForm: {
col19:{ required: required },
kitchenTime:{ required: requiredIf(function(baseInfoForm) {
return baseInfoForm.col19 == 'Y'
})}
}
}
})
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。