iview input blur事件

iview input blur事件

对于 iview 中的 Input事件仅仅介绍 on-blur 事件,其他事件用法蕾丝.

<template>
    <Input v-model="value"  @on-blur="change()"/>
</template>
<script>
    export default {
        data () {
            return {
                value: 'on-blur'
            }
        },
        methods:{
           oncahgn() {
              console.log(this.value);
          }
        }
    }
</script> 
on-enter	按下回车键时触发	无
on-click	设置 icon 属性后,点击图标时触发	无
on-change	数据改变时触发	event
on-focus	输入框聚焦时触发	无
on-blur	输入框失去焦点时触发	无
on-keyup	原生的 keyup 事件	event
on-keydown	原生的 keydown 事件	event
on-keypress	原生的 keypress 事件	event
on-search	开启 search 时可用,点击搜索或按下回车键时触发	value
on-clear 
3.4.0开启 clearable 时可用,点击清空按钮时触发

参考:https://www.iviewui.com/components/input

### iView 正则表达式验证密码 iView 是一个流行的 Vue 组件库,提供了丰富的组件用于构建用户界面。对于表单验证的需求,特别是针对密码字段的复杂度验证,可以利用正则表达式配合 iView 的 `Input` 和 `Form` 组件完成。 #### 创建自定义验证规则 为了实现密码强度验证,可以通过配置 FormItem 中 rules 属性下的 validator 函数来自定义验证逻辑[^1]: ```javascript // 密码强度正则匹配模式 const passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/; export default { data() { const validatePass = (rule, value, callback) => { if (!value || !passwordPattern.test(value)) { return callback(new Error('密码至少包含一个大写字母、一个小写字母和一个数字,并且长度不少于8位')); } callback(); }; return { formInline: { userPwd: '' }, ruleInline: { userPwd: [ { required: true, message: '请输入您的密码', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' } ] } }; } }; ``` 此代码片段展示了如何创建一个名为 `validatePass` 的函数作为自定义验证器,该验证器会检查输入是否满足指定条件并返回相应的错误消息给用户[^4]。 #### 表单模板部分 在 HTML 或者 `.vue` 文件中加入如下所示的表单项结构,以便于展示给用户的交互界面上能够正常工作[^2]: ```html <Form ref="formInline" :model="formInline" :rules="ruleInline"> <FormItem prop="userPwd"> <Input type="password" v-model="formInline.userPwd" placeholder="Enter your password"></Input> </FormItem> </Form> <Button @click="handleSubmit">Submit</Button> ``` 这段代码实现了当用户点击提交按钮时触发验证流程的功能;如果不符合设定好的规则,则会在对应位置显示提示信息提醒用户修正其输入内容[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值