当数据格式无法绑定到form表单如何触发校验

能绑定的格式:

let a = {
	a:1,
	b:1
}
<t-form :data="a"/>

不能绑定的格式得手动写循环

let a = [
{a;1,b:1},
{a:1,b:1}
]
<t-form>
	<t-form-item v-for....>
<t-form/>

这种时候如何触发校验

<t-form>
                <!-- h5自定义属性 data-validate 必填且未填写 -->
                <t-form-item
                	class="subFormItem"
                  v-for="(formItem, formIndex) in list"
                  :key="formIndex"
                  :data-validate="!formItem.value? 'validate-error' : ''"
                  :label="formItem.argName"
                >
<t-form/>

 validateAllForm() {
      // 寻找所有的form-item表单,形成它们的dom集合
      const mainForm = this.$refs.mainForm;
      const subFormItemList = mainForm.getElementsByClassName('subFormItem');
      // 遍历集合,根据dom上的自定义HTML参数判断是否必填且未填写,如果是,则根据dom找vue实例,触发validate显示
      let bol = true;
      for (const item of subFormItemList) {
        if (item.dataset.validate === 'validate-error') {
          item?.__vue__?.setValidateMessage([{ type: 'error', message: '请输入' }]);
          bol = false;
        }
      }
      return bol;
    },

使用html的自定义dom参数,:data-xxxx,item.dataset.xxxx
使用form-item实例中的方法setValidateMessage

如果你使用的是 Vant 2.x 版本,可以尝试加上`ref`属性,然后在提交表单的候手动触发校验,示例代码如下: ```html <template> <van-form ref="form"> <van-field v-model="name" name="name" label="用户名" placeholder="请输入用户名" :rules="nameRules"></van-field> <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" :rules="passwordRules"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { name: '', password: '', nameRules: [ { required: true, message: '请输入用户名' } ], passwordRules: [ { required: true, message: '请输入密码' } ] } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 如果使用的是 Vant 3.x 版本,可以使用 `validate` 方法自动触发校验,示例代码如下: ```html <template> <van-form :model="form" :rules="rules"> <van-field v-model="form.name" name="name" label="用户名" placeholder="请输入用户名"></van-field> <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请输入密码"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { form: { name: '', password: '' }, rules: { name: [ { required: true, message: '请输入用户名' } ], password: [ { required: true, message: '请输入密码' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 其中 `:model` 绑定表单数据,`:rules` 绑定校验规则,点击提交按钮通过 `validate` 方法触发校验
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值