Element-ui Form表单校验-兜底校验-自定义检验规则
用户登录表单-数据双向绑定
<template><div class="form-container"><el-form label-width="80px"><el-form-item label="手机号"><el-input v-model="form.mobile"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="form.code"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template>
<script>
export default {data() {return {form: {mobile: '',code: ''}}},methods: {onSubmit() {console.log('submit!')}}
}
</script><style scoped>.form-container{width: 600px;}
</style>
小结
表单中的数据项一般会用一个对象包起来
属性名一般和后端接口中保持一致
在元素上采用v-model双向绑定
Form表单校验-基本介绍
目标
了解表单校验的必要性和实现方式
校验必要性
在向后端发请求调用接口之前,我们需要对所要传递的参数进行验证,来把用户的错误扼杀在摇篮之中。
不能相信用户的任何输入!不能相信用户的任何输入!不能相信用户的任何输入!
校验内容
- 内容不能为空
- 密码长度必须多少位
- 手机号的格式要合规
校验方式
- 不依赖于任何组件的验证
- 在做提交之前,自己把数据分析处理一下。
- 基于具体组件的验证(不同的组件库,它的验证方式可能也各有不同)
小结
表单内容一定要验证(不能相信用户的任何输入!);
如果使用是组件库中的表单,最好是采用它们自带的验证方式
Form表单组件-表单验证
场景
在上面的表单中,要求:用户名必填
目标
掌握element-ui中表单校验的使用
基本步骤-共三步
定义验证规则。data()中按格式定义规则
在模板上做属性配置来应用规则(三个配置)
给表单设置
rules
属性传入验证规则给表单设置
model
属性传入表单数据给表单项(Form-Item )设置
prop
属性,其值为设置为需校验的字段名手动兜底验证
步骤1-定义表单验证规则
在 data 中,补充定义规则。
格式:
data() {return {rules: {// 字段名1:表示要验证的属性// 值: 表示验证规则列表。它是一个数组,数组中的每一项表示一条规则。// 数组中的多条规则会按顺序进行字段名1: [{ 验证规则1 },{ 验证规则2 },],字段名2: [{ 验证规则1 },{ 验证规则2 },], }}
}
示例
{ required: true, message: '请输入验证码', trigger: 'blur' },{ pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
实操代码
data () {return {// 表单验证规则,整体是一个对象// 键:要验证的字段, 值:是一个数组,每一项就是一条规则rules: {// 字段名:mobile就表示要验证的 属性// 值: 是一个数组。数组中的每一项表示一条规则。mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]}}},
注意:
- rules中的属性名与表单数据项中的属性名必须是一致的。
步骤2-模板中的配置
内容:
给 el-form 组件绑定 model 为表单数据对象
给 el-form 组件绑定 rules 属性配置验证规则
给需要验证的表单项 el-form-item 绑定 prop 属性,注意:prop 属性需要指定表单对象中的数据名称
代码:
<el-form label-width="80px" :model="form" :rules="rules"><el-form-item label="手机号" prop="mobile"><el-input v-model="form.mobile"></el-input></el-form-item><el-form-item label="密码" prop="code"><el-input v-model="form.code"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button @click="onCancel">取消</el-button></el-form-item>
</el-form>
验收效果
我们做到这一步时,当用户输入的内容不符合表单规则要求时,并且某个输入框失焦时,它会给出相应的提示,当我们输入的内容符合要求时,错误提示会自动消失。
步骤3-手动兜底验证
格式
element-ui的表单组件.validate(valid => {if(valid) {// 通过了验证} else {// 验证失败}
})
说明:
- validate 方法是表单组件自带的,用来对表单内容进行检验。
- 需要在模板中添加对表单组件的引用:ref 的作用主要用来获取表单组件手动触发验证
代码-模板
<el-form label-width="80px"
+ ref="form":model="form":rules="rules">
添加ref来引用el-form组件。
代码
在做提交时进行手动兜底验证,如果通过了验证
doLogin () {alert('我可以做登录了')
},
submit () {this.$refs.form.validate(valid => {// valid 就是表单验证的结果,如果是true,表示通过了// console.log(valid)if (valid) {// 通过了验证,你可以做后续动作了this.doLogin()}})
}
小结
步骤
定义验证规则(按element-ui的要求来)
配置模板,应用规则
给表单设置
rules
属性传入验证规给表单设置
model
属性传入表单数据给表单中的元素(Form-Item )设置
prop
属性,其值为设置为需校验的字段名手动兜底验证
Form表单组件-表单验证
目标
手机号不能为空,且必须为11位手机号 (/^1[0-9]{10}$/)
密码为必填且长度6到8位字符
代码
定义规则
rules:{name: [// trigger: 什么时候触发验证 { required: true, message: '请输入手机号', trigger: 'blur' },// pattern : 正则{ pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }]}
模板中配置应用规则
<el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="手机号" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form>
注意
下面三个地方的属性名必须一致
Form表单组件-表单验证-自定义检验规则
场景:
密码不允许是123456
目标
掌握自定义检验规则的使用格式
思路
在rules中自定义validator
格式
rules:{属性名1: [{ // 注意参数顺序validator: function (rule, value, callback) {// rule:采用的规则// value: 被校验的值// callback是回调函数, // 如果通过了规则检验,就直接调用callback()// 如果没有通过规则检验,就调用callback(错误对象,在错误对象中说明原因)// 例如:callback(new Error('错误说明'))}, trigger: 'blur' }]
}
落地代码
rules: {name: [{required: true, message:'必须要填入', triggle: 'blur'}],code: [{validator:(rule, value, callback)=>{console.log(rule, value, callback)if(value === '123456') {callback(new Error('这是世界上最差的密码了'))} else {callback()}},triggle: 'blur'},{min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},{required: true, message:'必须要填入', triggle: 'blur'},]
}
小结
- 自定义规则可以让校验逻辑更加灵活,它的格式是固定的
- callback必须调用
Element-ui Form表单校验-兜底校验-自定义检验规则相关推荐
- form表单输入正则校验
form表单输入正则校验 <el-formslot="dialog-content"class="dialogContent":model="u ...
- element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果 效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明;element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者 地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
- 基于vue3 element plus form 表单的二次封装
记录一下开发中对form表单的二次封装及使用 前言 在我们的日常工作中经常会使用到form表来满足提交需求,那么将form表单封装成组件将会大大提高我们的工作效率,避免更多重复代码的书写,只需一些简单 ...
- Element UI进行表单校验的时候,输入正确内容后,还有提示问题
问题:表单中输入正确的内容后,还提示请输入内容 部分代码如下: // 表单 <el-dialog title="添加用户" :visible.sync="dialo ...
- uniapp uview 框架的form表单,输入校验手机号、校验微信号
效果 代码实现 <u-form :model="form" ref="form"><u-form-item label-width=" ...
- uniapp form表单validator函数校验
尝试了用uniapp的from以及uni-forms发现并不是特别好用,就在插件市场找了一个类似于element-ui的表单验证组件,用法基本上和element-ui一致,使用也比较方便 因为目前是用 ...
- 上传多张图片的html表单,element在form表单里上传多张张图片
1.template里面 title="新增" :visible.sync="Visible" width="30%" > ref=& ...
- element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...
- 深究AngularJS——校验(非form表单)
为什么是非form表单?因为基本上都是通$http服务异步发送与接收数据,没有form表单个一样可以.更何况,form表单的提交校验在哪里都可以搜索得到,我这个是通过自己总结出来滴. <!DOC ...
最新文章
- 爬虫python代码-Python爬虫教程:200行代码实现一个滑动验证码
- java中的Cookie是什么_第74节:Java中的Cookie和Session
- linux下升级 OpenSSH
- Kubernetes引发“军备赛”,K8s真是企业生存的关键吗
- bash下特殊字符的含义
- js 判断对象是否是Array
- C类型和存储方式的语言变量
- Java后端开发实习面试
- 五款服务器配置管理工具
- 计算机公式sin,三角函数计算公式大全
- Tree Traversal(二叉树的遍历)
- Android 3D游戏开发技术详解与典型案例
- QGC地面站配置PX4Flow光流传感器
- JS中终止函数执行的代码
- 【毕业设计_课程设计】基于机器学习的情感分类与分析算法设计与实现(源码+论文)
- 深入浅出用户会员体系设计
- 小米路由器pro装php,关于路由器:小米路由器proR3P安装opkg
- 木老师教笨笨课堂——系列讲座(从函数指针到委托) 三、C++语言里的函数指针...
- 编程英语:常见代码错误 error 语句学习(11)
- 施工现场软件管理的必要性 —— 焊接与检验软件升级版本的试应用
热门文章
- CSU1129 送货到家 状压dp
- 2017 Android GitHub常用热门开源框架汇总
- 云原生(一) | 介绍篇之大数据需要拥抱云原生吗?云原生为什么这么火?
- java初学之运算的隐式转换
- 【微信小程序分包上传大文件/视频】
- python 正则 re.match_python正则表达式re.match()匹配多个字符方法的实现
- re模块match和search的区别
- 退出界面,优雅的关闭软键盘。
- 微信小程序 消息推送
- 生成圆锥内的均匀分布的单位向量(Generating uniform unit random vectors in a cone)