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

程序员文章站 2022-07-07 20:56:02

vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。1. 写在 data 中验证表单内容

vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。

1. 写在 data 中验证

表单内容

<!-- 表单 -->
<el-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
    <el-form-item label="用户名称:" prop="username">
       <el-input v-model="rulesform.username" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

<el-form>：代表这是一个表单
<el-form> -> ref：表单被引用时的名称，标识
<el-form> -> rules：表单验证规则
<el-form> -> model：表单数据对象
<el-form> -> label-width：表单域标签的宽度，作为 form 直接子元素的 form-item 会继承该值
<el-form> -> <el-form-item>：表单中的每一项子元素
<el-form-item> -> label：标签文本
<el-form-item> -> prop：表单域 model 字段，在使用 validate、resetfields 方法的情况下，该属性是必填的
<el-input>：输入框
<el-input> -> v-model：绑定的表单数据对象属性
<el-input> -> style：行内样式
<el-input> -> maxlength：最大字符长度限制

data 数据

data() {
    return {
        // 省略别的数据定义
        ...
        
        // 表单验证
        formrules: {
            username: [
                {required: true,message: "请输入用户名称",trigger: "blur"}
            ]
        }
    }
}

formrules：与上文 '表单内容' 中 <el-form> 表单的 :rules 属性值相同
username：与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入用户名称'

2. 写在行内

表单内容

<!-- 表单 -->
<el-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
    <el-form-item label="银行名称:" prop="accountname" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
        <el-input v-model="rulesform.accountname" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

<el-form-item> -> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述

data 数据没有内容

3. 引入外部定义的规则

表单内容

<!-- 表单 -->
<el-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
    <el-form-item label="银行卡号:" prop="accountnumber">
       <el-input v-model="rulesform.accountnumber" style="width:300px" maxlength="19"/>
    </el-form-item>
</el-form>

表单内容与第一种方式写法一致，这里不再赘述

script 内容

<script>
// 引入了外部的验证规则
import { validateaccountnumber } from "@/utils/validate";
 
// 判断银行卡账户是否正确
const validatoraccountnumber = (rule, value, callback) => {
  if (!value) {
    return callback(new error("请输入账户信息"));
  } else {
    if (validateaccountnumber(value)) {
      callback();
    } else {
      return callback(new error('账号格式不正确'))
    }
  }
};
 
export default {
    data() {
        return {
            // 省略别的数据定义
            ...
        
            // 表单验证
            formrules: {
                accountnumber: [
                    {required: true,validator: validatoraccountnumber,trigger: "blur"}
                ]
            }
        }
    }
}
</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. 表单的提交按钮

<!-- 表单 -->
<el-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
    <el-form-item>
        <el-button type="primary" @click="onsubmit('rulesform')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
    </el-form-item>
</el-form>

<el-button>：按钮
<el-button> -> type：按钮类型
<el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesform'，这里要与 <el-form> 表单的 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'，与 <el-form> 表单的 rel 属性值一致，这样就指定好需要验证的表单了

完整示例代码如下

1. rules.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activename">
      <el-tab-pane label="表单" name="rulespane" @tab-click="handleclick">
        <!-- 表单 -->
        <el-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
          <el-form-item label="用户名称:" prop="username">
            <el-input v-model="rulesform.username" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="银行名称:" prop="accountname" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
            <el-input v-model="rulesform.accountname" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="银行卡号:" prop="accountnumber">
            <el-input v-model="rulesform.accountnumber" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit('rulesform')">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
import { validateaccountnumber } from "@/utils/validate";
 
// 判断银行卡账户是否正确
const validatoraccountnumber = (rule, value, callback) => {
  if (!value) {
    return callback(new error("请输入账户信息"));
  } else {
    if (validateaccountnumber(value)) {
      callback();
    } else {
      return callback(new error('账号格式不正确'))
    }
  }
};
 
export default {
  name: "rules",
  data() {
    return {
      activename: "rulespane",
      defaultprops: {
        children: "children",
        label: "label"
      },
      rulesform: {
      },
      //   表单验证
      formrules: {
        username: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur"
          }
        ],
        accountnumber: [
          {
            required: true,
            validator: validatoraccountnumber,
            trigger: "blur"
          }
        ],
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleclick(tab) {
      
    },
    // 取消
    cancel() {
      
    },
    // 保存
    onsubmit(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          console.log("success submit!!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
 
<style lang="scss">
</style>

2. validate.js

/* 银行账户 */
export function validateaccountnumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}

效果图

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

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

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

1. 写在 data 中验证

2. 写在行内

3. 引入外部定义的规则

使用vue自定义指令开发表单验证插件validate.js

vue.js表单验证插件(vee-validate)的使用教程详解

使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

vue+elementUI实现表单和图片上传及验证功能示例

使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

vue2.0 + ele的循环表单及验证字段方法

Vue+Element实现动态生成新表单并添加验证功能

vue+elementUI实现表单和图片上传及验证功能示例

vue2.0 + ele的循环表单及验证字段方法

vue 使用自定义指令实现表单校验的方法