VUE 表单input 框使用@blur事件

**

VUE 表单input 框使用@blur事件

input 框失去焦点 ,便会触发定义的方法
表单内的input框
form表单代码

  <el-form-item label="身份证号码:" prop="idNumber">
       <el-input  @blur="onBsp($event)" v-model="laApplicationDetail.idNumber" placeholder="身份证号码"  maxlength="18" show-word-limit
                            style="width: 240px;" ></el-input >
  </el-form-item>

methods方法,下面附代码

methods的方法
methods方法代码

onBsp(event) {
        let queryParam = {
          name:event.target.form[0].value,
          idcard: event.target.value
        }
        getinformation(queryParam).then(res => {
          let list = res.data;
          this.laApplicationDetail.migrantworker = list.migrantworker;
          this.laApplicationDetail.phone = list.phone;
        }).catch(error => {
          this.$message({
            message: error.response.data.message ? error.response.data.message : '网络异常',
            type: 'warning'
          })
        });
      },

上图的 方法的 queryParam参数怎么获取的

在这里插入图片描述

小白记录自己学习的过程 欢迎各位大佬指点

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 中,我们可以通过在表单控件上绑定 `v-model` 指令来实现表单数据双向绑定。对于循环生成的表单控件,我们可以使用 `v-for` 指令来进行循环渲染。 要对循环生成的表单控件进行表单验证,我们可以使用自定义指令或者第三方库来实现。下面是使用自定义指令的示例代码: ```html <template> <form @submit.prevent="submitForm"> <div v-for="(item, index) in formItems" :key="index"> <label :for="'input-' + index">{{ item.label }}</label> <input :id="'input-' + index" v-model="item.value" v-validate:blur="item.rules" /> <span v-if="errors.has('input-' + index)" class="error">{{ errors.first('input-' + index) }}</span> </div> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { formItems: [ { label: '用户名', value: '', rules: 'required|min:3|max:16' }, { label: '密码', value: '', rules: 'required|min:6|max:16' } ] } }, methods: { submitForm() { if (this.errors.any()) { return; } // 表单验证通过,可以提交表单数据 } }, directives: { validate: { inserted(el, binding) { const input = el.tagName === 'INPUT' ? el : el.querySelector('input'); input.addEventListener('blur', () => { const rules = binding.value.split('|'); const fieldName = input.id; const errors = validate(fieldName, input.value, rules); if (errors) { input.classList.add('error'); binding.instance.errors.add(fieldName, errors[0]); } else { input.classList.remove('error'); binding.instance.errors.remove(fieldName); } }); } } } } </script> <style> .error { color: red; } </style> ``` 在上面的示例代码中,我们使用了 `v-validate` 指令来对表单控件进行验证,其中 `v-validate:blur` 表示在输入失去焦点时进行验证。我们通过自定义指令 `validate` 来实现表单验证的逻辑,在 `inserted` 钩子函数中,我们使用了 `validate` 库来进行表单验证,并根据验证结果来添加或移除错误提示信息。在 `submitForm` 方法中,我们通过 `this.errors.any()` 来判断表单是否验证通过。 需要注意的是,这里使用的是第三方库 `validate` 来进行表单验证,你需要先安装该库并引入。同时,为了方便起见,这里的错误提示信息直接使用了 `validate` 库返回的第一个错误信息,你可以根据实际需求来自定义错误提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值