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

• 验证规则

---

以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证

  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