vue点击按钮之后置成不可用_Vue 动态改变 button 的 disabled 状态

在使用 iview 做自定义表单验证时，有一个需求是当用户名和手机号都填写正确后，下一步按钮的 disabled 设置为 false，记录一下学习过程。

下一步

data () {

const validateMobile = (rule, value, callback) => {

if (/(^0?[1][3-9][0-9][\d]{8}$)|(^0[1-9][\d]{1,2}[- ]?[\d]{7,8}[-| ]?[\d]*$)/.test(value)) {

this.mobileAlready = true

callback()

} else {

this.mobileAlready = false

callback(new Error('请输入正确的手机号码'))

}

const validateUsername = (rule, value, callback) => {

if (/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,15}$/.test(value)) {

this.usernameAlready = true

return callback()

} else {

this.usernameAlready = false

return callback(new Error('用户名要求4-15字符'))

}

return {

usernameAlready: false,

mobileAlready: false,

formData: {

username: '',

mobile: '',

email: '',

password: '',

formRule: {

username: [{

validator: validateUsername,

required: true,

trigger: 'blur'

}],

mobile: [{

validator: validateMobile,

required: true,

trigger: 'blur'

}],

password: [{

required: true,

message: '请填写密码',

trigger: 'blur'

}, {

type: 'string',

min: 6,

message: '密码长度不能小于6位',

trigger: 'blur'

}]

}

computed: {

checkStep1Already () {

return !(this.usernameAlready && this.mobileAlready)

}

vue点击按钮之后置成不可用_Vue 动态改变 button 的 disabled 状态相关推荐

vue点击按钮之后置成不可用_2020.03vue常见问题总结
2020.03前端问题总结由于vue是MVVM,日常经常有些渲染问题. 1.绑定的元素(v-for)渲染出来的数据,尤其是对话框中.使用push.shift.splice等操作原数组的方法可使数据更 ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
vue点击菜单跳转时，背景颜色动态变化
** vue点击菜单跳转时,背景颜色动态变化 ** html: script: export default { name: "menu", data() { return { a ...
android顶部按钮图片,安卓动态改变button顶部图片即drawableTop属性
比如一个按钮在layout文件中设置了为灰色的图片资源 android:id="@+id/polling_end" android:layout_width="0dp&q ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
electron vue点击按钮关闭_electron+vue制做桌面应用--自定义标题栏最大/小化和关闭...
上一篇:electron+vue制做桌面应用--自定义标题栏中咱们介绍了如何使用electon制做自定义样式的标题栏接下来,咱们介绍一下标题栏上的最大化.最小化和关闭按钮如何实现vue 首先查阅el ...
Vue点击按钮跳转到新路由
前言,点击添加商品按钮,跳转到新路由 1.第一步,绑定click事件 <el-button type="primary" @click="goAddPage&q ...
vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
vue点击按钮显示弹窗写法
案例1 源码如下 <template><div class="box" v-cloak><div><div class="mas ...

vue点击按钮之后置成不可用_Vue 动态改变 button 的 disabled 状态

vue点击按钮之后置成不可用_Vue 动态改变 button 的 disabled 状态相关推荐

最新文章

热门文章