vue如何在input符合条件时才给input绑定focus事件.

Question

问题描述

我想做一个二次密码验证的功能,但是有很多输入框,但我只想给密码框绑定@focus="twiceCheck"事件,而我的表单渲染是通过v-for来完成的,所以我要怎么只给id为password的input框绑定事件函数呢?可以不用写js函数的情况完成吗?谢谢

相关代码

Vue组件的data:

export default {
    name: 'register',
    data() {
      return {
        node: [
          {
            divID: 'username-div',
            labelText: '用户名:',
            name: 'username',
            placeholderText: 'username',
            type: 'text',
            pattern: "^[0-9a-zA-Z]{6,15}$"
          },
          {
            divID: 'password-div',
            labelText: '密码:',
            name: 'password',
            placeholderText: 'password',
            type: 'password',
            pattern: "^[0-9a-zA-Z]{6,}$",
            focusF:twiceCheck//只有这个有focus函数
          },
          {
            divID: 'password_reput-div',
            labelText: '确认密码:',
            name: 'password_reput',
            placeholderText: 'password_reput',
            type: 'password',
          },
          {
            divID: 'tel-div',
            labelText: '手机:',
            name: 'tel',
            placeholderText: 'tel',
            type: 'text',
            pattern: "(\\d{11})|^((\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1})|(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1}))$"
          },
          {
            divID: 'email-div',
            labelText: 'email:',
            name: 'email',
            placeholderText: 'email',
            type: 'email'
          },
          {
            divID: 'transaction_password-div',
            labelText: '交易密码:',
            name: 'transaction_password',
            placeholderText: 'transaction_password',
            type: 'password',
            pattern: "^[0-9a-zA-Z]{6,}$"
          },
          {
            divID: 'transaction_password_reput-div',
            labelText: '确认交易密码:',
            name: 'transaction_password_reput',
            placeholderText: 'transaction_password_reput',
            type: 'password',
            pattern: "^[0-9a-zA-Z]{6,}$"
          },
        ],

渲染方式

 <template v-for="item in node">
        <div :id="item.divID">
                    <label :for=item.name class="label-text">{{item.labelText}}</label>
          <input :type=item.type class="form-item" :name=item.name :id="item.name" :placeholder="item.placeholderText"
                 :pattern=item.pattern
                 @focus="item.focusF(this.password,this.password_reput)"
                 required>
        </div>
      </template>

二次验证的函数

function twiceCheck(password, password_reput) {
  password = document.getElementById("password");
  password_reput = document.getElementById("password_reput");
  password_reput.pattern = password.value;
  console.log("password.value:" + password.value);
  console.log("password_reput.pattern:" + password_reput.pattern);
}

你期待的结果是什么？实际看到的错误信息又是什么？

错误信息就是渲染的时候,给每个input框都绑定了focus事件,导致其他非password输入框点击后会报错
而且我的函数传参好像也不能动态传参

这是非password框点击后报错

Answer 1

通过三目运算符来绑定事件,这样就可以给需要绑定事件的input框绑定事件,而对其他的input框没有影响.

<template v-for="item in node">
        <div :id="item.divID">
          <label :for=item.name class="label-text">{{item.labelText}}</label>
          <input :type=item.type class="form-item" :name=item.name :id="item.name"
                 :placeholder="item.placeholderText"
                 :pattern=item.pattern
                 @focus="item.focusF?item.focusF():null"
                 required>
        </div>
      </template>

而函数的参数采用bind传递:

{
            divID: 'password-div',
            labelText: '密码:',
            name: 'password',
            placeholderText: 'password',
            type: 'password',
            pattern: "^[0-9a-zA-Z]{6,}$",
            focusF:twiceCheck.bind(null,this.password,this.password_reput)
          },

Answer 2

标签上用v-if v-else呢?

<input v-if="item.type=='password'" :type=item.type class="form-item" :name=item.name :id="item.name" :placeholder="item.placeholderText"
     :pattern=item.pattern
     @focus="item.focusF(this.password,this.password_reput)"
     required>
<input v-else :type=item.type class="form-item" :name=item.name :id="item.name" :placeholder="item.placeholderText"
     :pattern=item.pattern
     required>     
  

Answer 3

item.focusF(this.password,this.password_reput),这个参数定义了吗