vue表单验证,重置
<template><div class="all"><div class="content"><el-form :model="memberlist" :rules="memberlistRules" ref="memberlistRef" label-width="80px"><el-form-item label="原密码" prop="oldpassword"><el-input class="ipt" v-model="memberlist.oldpassword" autocomplete="off" clearable /></el-form-item><el-form-item label="新密码" prop="password"><el-input class="ipt" v-model="memberlist.password" autocomplete="off" clearable /></el-form-item><el-form-item><el-button type="primary" @click="sumit()">确定</el-button><el-button @click="next('memberlistRef')">重置</el-button></el-form-item></el-form></div></div>
</template><script>
const memberlist = {oldpassword: "",password: "",newpassword: ""
}export default {data() {return {memberlist,memberlistRules: {oldpassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],password: [{ required: true, message: '请输入新密码', trigger: 'blur' },{ min: 8, message: '建议密码不小于8个字符', trigger: 'blur' }],},};},created() {},methods: {sumit() {this.$refs.memberlist.validate((valid) => {if (valid) {// 成功时的内容} else {// 失败时的内容}})},next(formName) {this.$refs[formName].resetFields();}},
};
</script><style scoped>
.all {height: 55vh;width: 100%;
}.all .content {padding: 50px;margin-top: 80px;margin-left: 50px;width: 600px;height: 140px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}/* .all .content .el-button {margin-left: 430px;
} */.ipt {width: 500px;
}
</style>
vue表单验证,重置相关推荐
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- vue表单验证,多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现 这里以antd 举例 <template><a-form-model ref="rule ...
- vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formC ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
- Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
- vue表单验证,不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
- vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
- Vue 表单验证、数据验证
graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (: 使用说明 1 将 graceChecker.js 部署到您的项 ...
- vue 表单验证并提交
vue 表单验证并提交 一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则 二.表单提交时验证 1.表单的提交按钮 2.ethods 方法 一.常用验证方式 ...
- bootstrap的表单验证 vue_vue-form(vue表单验证插件 vue2.2+) 使用指南
vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+ import VueForm from 'vue-fo ...
最新文章
- ubuntu16.04下Sublime Text3中文无法输入解决方法和创建桌面快捷方式
- 为什么深度学习是非参数的?
- iOS之深入解析Runtime的objc_msgSend“快速查找”底层原理
- 数据湖之iceberg系列(一)iceberg能做什么
- Vijos P1196吃糖果游戏[组合游戏]
- li标签行内元素高度及居中
- VSCode自定义代码片段2——.vue文件的模板
- Spring @Bean @Scope @Qualifier
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_02-自定义查询页面-服务端-接口开发...
- 大学四年走来,这些网络工程师必备的模拟器我都给你整理好了
- SQL Express
- 一个程序小白的大胆尝试 (鸡汤)
- 冉宝的每日一题--8月13日
- iOS组件化——蘑菇街案例分析
- java自定义类加载器并观察类卸载过程
- 为什么图像预处理矩阵要除以255?
- 计算机无法连接网络显示错误651,电脑连接路由器提示错误651解决办法
- FBA海运是什么,FBA海运的优势是什么
- SDNU-1012.区间合并
- 使用U盘安装openSUSE-Leap-15.4-DVD-x86_64