锐客网

  1. 首页 > it技术 > >

vue使用rules实现表单字段验证

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)}

  • 验证规则
【vue使用rules实现表单字段验证】以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证
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使用rules实现表单字段验证
文章图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：分析总结Python数据化运营KMeans聚类

    下一篇：原生js编写贪吃蛇小游戏