问题描述
我想做一个二次密码验证的功能,但是有很多输入框,但我只想给密码框绑定@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框点击后报错
通过三目运算符来绑定事件,这样就可以给需要绑定事件的input框绑定事件,而对其他的input框没有影响.
而函数的参数采用
bind
传递: