element-ui表单验证(验证手机号是否正确,自定义验证规则)
效果图
1. html
<el-form :model="userForm"status-icon:rules="rules"class="login-form"ref="userForm"><el-form-item class="login-head"></el-form-item><el-form-item prop="mobile"><el-input v-model="userForm.mobile"placeholder="请输入手机号"></el-input></el-form-item><el-form-item prop="code"><el-input v-model="userForm.code"placeholder="请输入验证码"></el-input></el-form-item><el-form-item prop="agree"><el-checkbox v-model="userForm.agree">我已阅读并同意用户协议</el-checkbox></el-form-item><el-form-item><el-button type="primary"class="login-btn":loading="loginLoading"@click="onLogin">登录</el-button></el-form-item></el-form>
2. script
export default {name: 'login',data () {// 自定义表单验证是否勾选协议协议var validateAgree = (rule, value, callback) => {if (value) {callback()} else {callback(new Error('请勾选同意协议'))}}// rule:验证的详细信息// value:验证是否通过,false失败,true通过// callback:回调函数 return {userForm: {mobile: '13911111111',code: '246810',agree: false // 协议},checked: false, // 复选框loginLoading: false, // 按钮加载状态rules: {mobile: [// 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/,验证手机号是否正确{ required: true, message: '请输入手机号', trigger: 'change' },{ pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }],code: [{ required: true, message: '请输入验证码', trigger: 'change' }],// 自定义验证是否勾选协议agree: [{ validator: validateAgree, trigger: 'change' }]}}},methods: {onLogin () {// validate是异步请求this.$refs.userForm.validate(valid => {// 如果验证失败,不发送请求if (!valid) {return false}this.login()})},login () {this.loginLoading = truelogin(this.userForm).then(res => {// console.log(res)this.$message.success('登录成功!')this.loginLoading = false}).catch(err => {this.$message.error('登录失败!', err)this.loginLoading = false})}}
}
element-ui表单验证(验证手机号是否正确,自定义验证规则)相关推荐
- element UI 表单自定义验证,css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- vue+element ui表单校验(邮箱、电话、工商信息)
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
- vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...
- form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
- html5 表单必填项,javascript - HTML5表单必填属性。 设置自定义验证消息?
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
- element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
- element ui 表单验证通过后没有绿色框 求解 (已解)
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
- Element UI——表单验证输入的数字检测出来是string解决方案
问题描述 打印 判断类型 问题分析 解决方案 数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
- element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框 这里只讲弹框里面的校验代码: <template><div id="cre ...
最新文章
- JSON入门基础知识
- Java读取文件流用什么对象_使用Java IO流实现对文本文件的读写过程中,通常需要处理下列( )异常。_学小易找答案...
- 科大星云诗社动态20201119
- java中array,arrayList,iterator;
- java富文本如何转义_富文本编辑器wangEditor中转义字符的问题
- neo4j 显示名字_Neo4j:绘制“我的名字是……我在工作”图
- 炸窝(Collections当中的addAll方法)
- FreeRTOS系列第19篇---FreeRTOS信号量
- vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用
- tf:'hello tensorflow'
- 学好java再学c 可以吗_再论学好C的重要性!!!
- C#中virtual与abstract的区别
- Windows下SVN备份脚本
- php关联数组和哈希表,12、哈希表(关联数组) - RGSS 入门教程
- 19 接口类和抽象类
- 2021上海交大网络安全保研夏令营经验
- hdu 5294 Tricks Device 最短路建图+最小割
- 【秋招】搜狐游戏_数据分析岗_面试题整理
- addclass和css()的区别
- 计算机课拔线头检讨书,电脑显示器上出现检测信号线应该怎么解决?
热门文章
- 自定义公众号页面右上角分享
- 计算机专业发展前景分析及对策,2021年计算机科学与技术发展前景
- 传感器与测试技术搜题软件,【必备】自考《02202传感器与检测技术》历年真题及答案【23份】【更新至2021年4月题】...
- [微服务架构 ] 微服务- 生存还是毁灭!
- Unity 美术字图片 生成 字体Font
- 服务器任务管理器详细信息,服务器怎么打开任务管理器
- es文件新建ftp服务器,es文件浏览器 新建ftp服务器
- 【Python游戏】用Python实现一个测试你智商的小游戏——24点,过不了三关的remake(附源码)
- default-scheduler 0/1 nodes are available: 1 node(s) had taint {node.kubernetes.io/disk-pressure: }
- POJ 3579 二分