vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。
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：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述
data 数据没有内容
3. 引入外部定义的规则
表单内容
- 表单内容与第一种方式写法一致，这里不再赘述
script 内容
- import：先引入了外部的验证规则
- const：定义一个规则常量，常量名可变， ‘= (rule, value, callback) => {}’ 为固定格式，value 入参为验证的字段值
- formRules -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称
validate.js
/* 银行账户 */ export function validateAccountNumber(str) { const reg = /^([1-9]{1})(\d{14}|\d{18})$/ return reg.test(str) }- 验证规则
以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证
1. 表单的提交按钮
保存
取消
-
：按钮
-
-> type：按钮类型
-
-> @click：按钮点击时触发的事件，这里注意方法的入参为 ‘rulesForm’，这里要与
表单的 rel 属性值 一致
2. methods 方法
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’，与
表单的 rel 属性值一致，这样就指定好需 要验证的表单了
完整示例代码如下
1. rules.vue
保存
取消
2. validate.js
/* 银行账户 */ export function validateAccountNumber(str) { const reg = /^([1-9]{1})(\d{14}|\d{18})$/ return reg.test(str) }效果图
欢迎来访我的vue专栏总篇博客
希望能够帮助到你
over
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204218.html原文链接：https://javaforall.net
