在vue中使用rules对表单字段进行验证方式
目录
- 1. 写在 data 中验证
- 表单内容
- data 数据
- 2. 写在行内
- 表单内容
- 3. 引入外部定义的规则
1. 写在 data 中验证
表单内容
：代表这是一个表单 -> ref：表单被引用时的名称，标识 -> rules：表单验证规则 -> model：表单数据对象 -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 -> ：表单中的每一项子元素 -> label：标签文本 -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 ：输入框 -> v-model：绑定的表单数据对象属性 -> style：行内样式 -> maxlength：最大字符长度限制
data 数据
data() {return {// 省略别的数据定义...// 表单验证formRules: {userName: [{required: true,message: "请输入用户名称",trigger: "blur"}]}}}
formRules：与上文'表单内容' 中表单的 :rules 属性值相同 userName：与上文 '表单内容' 中表单子元素的 prop 属性值相同 - 验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入用户名称'
2. 写在行内 表单内容
-> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述
3. 引入外部定义的规则 表单内容
表单内容与第一种方式写法一致，这里不再赘述
script 内容
import：先引入了外部的验证规则const：定义一个规则常量，常量名可变， '= (rule, value, callback) => {}' 为固定格式，value 入参为验证的字段值formRules -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称
/* 银行账户 */export function validateAccountNumber(str) {const reg = /^([1-9]{1})(\d{14}|\d{18})$/return reg.test(str)}
【在vue中使用rules对表单字段进行验证方式】验证规则
以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证
1. 表单的提交按钮
保存 取消
：按钮 -> type：按钮类型 -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与 表单的 rel 属性值一致
methods: {// 保存onSubmit(formName) {this.$refs[formName].validate(valid => {if (valid) {console.log("success submit!!"); }else{console.log("error submit!!"); }}); },// 取消cancel() {}}
this.$refs[formName].validate：formName 就是传入的 'rulesForm'，与
完整示例代码如下
1. rules.vue
保存 取消
2. validate.js
/* 银行账户 */export function validateAccountNumber(str) {const reg = /^([1-9]{1})(\d{14}|\d{18})$/return reg.test(str)}
效果图
文章图片
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
推荐阅读
- Java中两种基本的输入方式小结
- node.js在Linux下执行shell命令、.sh脚本的问题
- 在Java中实现让线程按照自己指定的顺序执行
- 城市|广东埋得最深的秘密：在地下700米
- 供应链|复刻SHEIN，中国跨境供应链大突围 | 钛媒体深度
- springboot中内置tomcat什么时候创建的，又是什么时候启动的（）
- nginx配置 解决 vue history模式下空白 ，以及SSL证书安装
- vue - ES6模块化promisewebpack打包（所在在学的朋友们先看这篇，看了不吃亏）...
- Vue3全局挂载使用Axios学习实战
- 解决Java中new|解决Java中new BigDecimal()的坑