Vue.js 2.2的全面表单验证

最新推荐文章于 2024-08-17 17:56:24 发布
最新推荐文章于 2024-08-17 17:56:24 发布
阅读量595 收藏
点赞数
文章标签： vue python java js javascript ViewUI
原文链接：https://vuejsexamples.com/comprehensive-form-validation-for-vue-js-2-2/
版权

语言形式 (vue-form)

Form validation for Vue.js 2.2+

Vue.js 2.2的表单验证

现场例子 (Live examples)

安装 (Install)

Available through npm as vue-form.

通过npm作为vue-form可用。 

import VueForm from 'vue-form';
// or var VueForm = require('vue-form') or window.VueForm if you are linking directly to the dist file

// install globally
Vue.use(VueForm);
Vue.use(VueForm, options);

// or use the mixin
...
mixins: [VueForm]
...
mixins: [new VueForm(options)]
...

用法 (Usage)

Once installed you have access to four components (vue-form, validate, field, field-messages) for managing form state, validating form fields and displaying validation messages.

安装后，您可以访问四个组件( vue-form ， validate ， field ， field-messages )来管理表单状态，验证表单字段和显示验证消息。

Example

例 

<div id="app">
  <vue-form :state="formstate" @submit.prevent="onSubmit">

    <validate tag="label">
      <span>Name *</span>
      <input v-model="model.name" required name="name" />

      <field-messages name="name">
        <div>Success!</div>
        <div slot="required">Name is a required field</div>
      </field-messages>
    </validate>

    <validate tag="label">
      <span>Email</span>
      <input v-model="model.email" name="email" type="email" required />

      <field-messages name="email">
        <div slot="required">Email is a required field</div>
        <div slot="email">Email is not valid</div>
      </field-messages>
    </validate>

    <button type="submit">Submit</button>
  </vue-form>
  <pre>{{ formstate }}</pre>
</div>
Vue.use(VueForm);

new Vue({
  el: '#app',
  data: {
    formstate: {},
    model: {
      name: '',
      email: 'invalid-email'
    }
  },
  methods: {
    onSubmit: function () {
      if(this.formstate.$invalid) {
        // alert user and exit early
        return;
      }
      // otherwise submit form
    }
  }
});

The output of formstate will be:

formstate的输出将是： 

{
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "$touched": false,
  "$untouched": true,
  "$pending": false,
  "$error": {
    // fields with errors are copied into this object
  },
  "$submittedState": {
    // each form sumbit, state is cloned into this object
  },
  "name": {
    "$name": "name",
    "$dirty": false,
    "$pristine": true,
    "$valid": false,
    "$invalid": true,
    "$touched": false,
    "$untouched": true,
    "$pending": false,
    "$error": {
      "required": true
    }
  },
  "email": {
    "$name": "email",
    "$dirty": false,
    "$pristine": true,
    "$valid": false,
    "$invalid": true,
    "$touched": false,
    "$untouched": true,
    "$pending": false,
    "$error": {
      "email": true
    }
  }
}

显示讯息 (Displaying messages)

Display validation errors or success messages with field-messages.

使用field-messages显示验证错误或成功field-messages 。

The show prop supports simple expressions which specifiy when messages should be displayed based on the current state of the field, e.g: $dirty, $dirty && $touched, $dirty || $touched, $touched || $submitted

show prop支持简单的表达式，这些表达式根据字段的当前状态指定何时显示消息，例如： $dirty ， $dirty && $touched ， $dirty || $touched $dirty || $touched ， $touched || $submitted $touched || $submitted 

<field-messages name="name" show="$dirty && $touched">
  <div slot="errorKeyA">Error message A</div>
  <div slot="errorKeyB">Error message B</div>
</field-messages>

Or use scoped templates:

或使用范围模板： 

<field-messages name="fieldName">
  <span>Success</span>
  <template slot="required" scope="state">
    <span v-if="state.$touched || state.$submitted">Name is a required field</span>
  </template>
  <template slot="errorKeyB" scope="state">
    <span v-if="state.$touched || state.$dirty">Error message B</span>
  </template>
</field-messages>

验证者 (Validators)

type="email"
type="url"
type="number"
required
minlength
maxlength
pattern
min (for type="number")
max (for type="number")

You can use static validation attributes or bindings. If it is a binding, the input will be re-validated every binding update meaning you can have inputs which are conditionally required etc.

您可以使用静态验证属性或绑定。 如果是绑定，则每次绑定更新时将重新验证输入，这意味着您可以输入有条件要求的输入等。 

<!-- static validators -->
<validate>
  <input type="email" name="email" v-model="model.email" required />
</validate>
<validate>
  <input type="text" name="name" v-model="model.name" maxlength="25" minlength="5" />
</validate>

<!-- bound validators -->
<validate>
  <input type="email" name="email" v-model="model.email" :required="isRequired" />
</validate>
<validate>
  <input type="text" name="name" v-model="model.name" :maxlength="maxLen" :minlength="minLen" />
</validate>
定制验证器 (Custom validators)

You can register global and local custom validators.

您可以注册全局和本地自定义验证器。

Global custom validator

全局自定义验证器 

var options = {
  validators: {
    'my-custom-validator': function (value, attrValue, vnode) {
      // return true to set input as $valid, false to set as $invalid
      return value === 'custom';
    }
  }
}

Vue.use(VueForm, options);
// or
// mixins: [new VueForm(options)]
<validate>
  <input v-model="something" name="something" my-custom-validator />
  <!--
    slot name inside field-messages would be: <div slot="my-custom-validator">...</div>
  -->
</validate>

Local custom validator

本地自定义验证器 

// ...
methods: {
  customValidator: function (value) {
    // return true to set input as $valid, false to set as $invalid
    return value === 'custom';
  }
},
// local custom validator can also be a data or computed property
computed: {
  isEmailAvailable function () {
    // return true to set input as $valid, false to set as $invalid
  }
}
// ...
<validate :custom="{customValidator: customValidator, 'email-available': isEmailAvailable}">
  <input v-model="something" name="something" />
  <!--
    slot name inside field-messages would be: <div slot="customValidator">...</div>
  -->
</validate>
异步验证器： (Async validators:)

Async validators are custom validators which return a Promise. resolve() true or false to set field validity.

异步验证器是返回Promise的自定义验证器。 resolve() true或false设置字段有效性。 

// ...
methods: {
  customValidator (value) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(value === 'ajax');
      }, 100);
    });
  }
}
// ...

Async validator with debounce (example uses lodash debounce)

带有反跳的异步验证器(示例使用lodash反跳) 

methods: {
  debounced: _.debounce(function (value, resolve, reject) {
    fetch('https://httpbin.org/get').then(function(response){
      resolve(response.isValid);
    });
  }, 500),
  customValidator (value) {
    return new Promise((resolve, reject) => {
      this.debounced(value, resolve, reject);
    });
  }
}

重置状态 (Reset state)

<vue-form ref="form" :state="formstate">

resetState: function () {
  this.formstate._reset();
  // or
  this.$refs.form.reset();
}

州级 (State classes)

As form and input validation states change, state classes are added and removed

随着表单和输入验证状态的更改，添加和删除状态类

Possible form classes:

可能的表格类别： 

vf-form-dirty, vf-form-pristine, vf-form-valid, vf-form-invalid, vf-form-submitted

Possible input classes:

可能的输入类别： 

vf-dirty, vf-pristine, vf-valid, vf-invalid

// also for every validation error, a class will be added, e.g.
vf-invalid-required, vf-invalid-minlength, vf-invalid-max, etc

Input wrappers (e.g. the tag the validate component renders) will also get state classes, but with the field prefix, e.g.

输入包装器(例如validate组件渲染的标签)也将获得状态类，但带有field前缀，例如 

vf-field-dirty, vf-field-pristine, vf-field-valid, vf-field-invalid

定制组件 (Custom components)

When writing custom form field components, e.g. <my-checkbox v-model="foo"></my-checkbox> you should trigger the focus and blur events after user interaction either by triggering native dom events on the root node of your component, or emitting Vue events (this.$emit('focus)) so the validate component can detect and set the $dirty and $touched states on the field.

在编写自定义表单字段组件时，例如<my-checkbox v-model="foo"></my-checkbox>您应该在用户交互后触发focus和blur事件，方法是在组件的根节点上触发本机dom事件，或发出Vue事件( this.$emit('focus) )，以便validate组件可以检测并设置字段上的$dirty和$touched状态。

组件道具 (Component props)

语言形式 (vue-form)

  • state Object on which form state is set

    state设置表单状态的对象

  • tag String, defaults to form

    tag字符串，默认为form

  • show-messages String, applies to all child field-messages, show errors dependant on form field state e.g. $touched, $dirty || $touched, '$touched || $submitted'

    show-messages字符串，适用于所有子field-messages ，显示取决于表单字段状态的错误，例如$touched ， $dirty || $touched $dirty || $touched ，'$ touched || $ submitted'

验证 (validate)

  • state Optional way of passing in the form state. If omitted form state will be found in the $parent

    state传递表单状态的可选方式。 如果省略，则会在$ parent中找到状态

  • custom Object containing one or many custom validators. {validatorName: validatorFunction}

    custom对象，包含一个或多个自定义验证器。 {validatorName: validatorFunction}

  • tag String which specifies what element tag should be rendered by the validate component, defaults to span

    tag字符串，它指定validate组件应呈现的元素标签，默认为span

  • auto-label: Boolean, defaults to false. Automatically set for and id attributes of label and input elements found inside the validate component

    auto-label ：布尔值，默认为false。 自动设定for与id标签的属性和输入元件中发现的内部validate部件

  • debounce Number, defaults to none, which specifies the delay (milliseconds) before validation takes place.

    debounce Number，默认为none，它指定验证发生之前的延迟(毫秒)。

现场消息 (field-messages)

  • state Optional way of passing in the form state. If omitted form state will be found in the $parent

    state传递表单状态的可选方式。 如果省略，则会在$ parent中找到状态

  • name String which specifies the related field name

    name字符串，它指定相关的字段名称

  • tag String, defaults to div

    tag字符串，默认为div

  • show String, show error dependant on form field state e.g. $touched, $dirty || $touched, '$touched || $submitted'

    show String，根据表单字段状态显示错误，例如$touched ， $dirty || $touched $dirty || $touched ，'$ touched || $ submitted'

  • auto-label Boolean, defaults to false. Automatically set the for attribute of labels found inside the field-messages component

    auto-label布尔值，默认为false。 自动设置在field-messages组件内找到的标签的for属性

领域 (field)

  • tag String, defaults to div

    tag字符串，默认为div

  • auto-label Boolean, defaults to true. Automatically set for and id attributes of label and input elements found inside the validate component

    auto-label布尔值，默认为true。 自动设定for与id标签的属性和输入元件中发现的内部validate部件

设定档 (Config)

Set config options when using Vue.use(VueForm, options), or when using a mixin mixins: [new VueForm(options)] defaults:

使用Vue.use(VueForm, options)或使用mixin mixins: [new VueForm(options)]时Vue.use(VueForm, options)设置配置选项mixins: [new VueForm(options)]默认： 

{
    validators: {},
    formComponent: 'vueForm',
    formTag: 'form',
    messagesComponent: 'fieldMessages',
    messagesTag: 'div',
    showMessages: '',
    validateComponent: 'validate',
    validateTag: 'div',
    fieldComponent: 'field',
    fieldTag: 'div',
    formClasses: {
      dirty: 'vf-form-dirty',
      pristine: 'vf-form-pristine',
      valid: 'vf-form-valid',
      invalid: 'vf-form-invalid',
      touched: 'vf-form-touched',
      untouched: 'vf-form-untouched',
      submitted: 'vf-form-submitted',
      pending: 'vf-form-pending'
    },
    validateClasses: {
      dirty: 'vf-field-dirty',
      pristine: 'vf-field-pristine',
      valid: 'vf-field-valid',
      invalid: 'vf-field-invalid',
      touched: 'vf-field-touched',
      untouched: 'vf-field-untouched',
      submitted: 'vf-field-submitted',
      pending: 'vf-field-pending'
    },
    inputClasses: {
      dirty: 'vf-dirty',
      pristine: 'vf-pristine',
      valid: 'vf-valid',
      invalid: 'vf-invalid',
      touched: 'vf-touched',
      untouched: 'vf-untouched',
      submitted: 'vf-submitted',
      pending: 'vf-pending'
    },
    Promise: typeof Promise === 'function' ? Promise : null
}

翻译自: https://vuejsexamples.com/comprehensive-form-validation-for-vue-js-2-2/

cuk5340
关注
vue 动态表单验证
daixyhymn
08-07 902
关键的几点 el-form-item 中： v-for="(item,index) in tempContract.need" :prop="'need.'+ index +'.cname'" :rules="cardRules.charge" el-form-item 下的 el-input : v-model="need[index].value" <el-col :spa...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3841
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
vue 的表单验证
热门推荐
目标架构师
03-23 1万+
1.使用包裹整个表单 在其中使用:model 绑定数据 和 :rules绑定校验规则 2.在script中添加使用数据 以及 校验规则（都添加在data中） 3.在input应该被el-from-item包裹 传入prop （prop对应校验数据） 4.数据提交校验 在中使用ref （校验失败就不会发送请求）ref：本页面获取dom元素
vue2表单校验：el-form表单绑定数组并使用rules进行校验
最新发布
l_q_l的专栏
08-17 2306
1、在el-form中指定rule，可引用data或compute中集中定义的rules，也可以每一条item中单独定义自己的rule2、另外，花费1天的时间买来的教训：如果rules集中写，在el-form中已经引用了，那么在el-form-item中不能重复引用，否则console中不会报错，但是，rules将不起作用，且提示 people is not a string，即便在rules中添加了 type: 'array' 也不行。如下写法是错误的。​。
vue表单验证
Orange_Fanta的博客
03-22 2079
一、绑定el-form的model，下面验证的数据必须是这个model里的属性 绑定验证规则rules 二、每个表单域的prop用来绑定验证规则 同时注意到v-model里绑定的数据是我们第一步绑定的表单数据中的属性 三、编写rules，注意rules的位置，在 `data() { return { formData:{ understand: ‘’, }, rules: { understand: [{ required: true, message: ‘对现有岗位职责的理解不能为空’, trigger:
vue-form：Vue.js 2.2+的表单验证
02-06
Vue.js 2.2的表单验证 安装 通过npm可作为vue-form 。 import VueForm from 'vue-form' ; // or var VueForm = require('vue-form') or window.VueForm if you are linking directly to the dist file // install ...
Vue.js中的表单验证：提高用户输入的准确性
Vue.js作为一种流行的JavaScript框架，也提供了强大的表单验证能力。 ## 1.2 目的 本文旨在介绍Vue.js表单验证的基本原理和使用方法，以及推荐的最佳实践。通过阅读本文，读者将能够理解Vue.js表单验证的作用和...
Vue.js的表单处理：表单验证与数据提交
通过利用Vue.js的双向数据绑定、组件化结构以及方便的表单验证功能，开发者能够更高效地构建交互丰富的表单页面，并实现数据与视图的同步更新。 ## 1.2 Vue.js在表单处理中的优势 Vue.js在表单处理中具有诸多优势...
Vue.js中如何进行表单验证和数据校验？
Vue.js通过指令 `v-model` 来实现双向数据绑定，可以轻松地将表单元素与数据对象进行关联，确保数据和视图的一致性。 总体来说，Vue.js的数据绑定机制使得开发者可以更便捷地管理和操作数据，提升了前端开发的
VUE表单验证.txt
01-13
文档包含了常见的表单验证规则，包括是否合法IP地址、是否手机号码或者固话、是否固话、是否手机号码、是否身份证号码、是否邮箱、合法url、自动检验数值的范围、验证数字输入框最大数值、验证是否1-99之间、验证是否整数、验证是否是[0-1]的小数、验证是否是[1-10]的小数,即不可以等于0、小写字母、是否大写字母、是否大小写字母、密码校验、中文校验等
vue表单验证插件
08-10
在使用vue做项目的过程中，做表单验证通常需要事件绑定、数据双向绑定等才能完成一个验证操作，多个验证往往会有重复代码，所以就想写一个表单验证插件。
Vue - 表单验证
技术共享，共同进步！
03-05 531
<template> <div> <!-- 登录表单 --> <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" > <!-- 用户名 --> ...
vue form表单验证
qq_28586135的博客
07-21 2904
vue form表单验证 非必填不能为空，并且需要正则验证 必填，正则验证，不能只输入空格验证 必填，正则验证，不能输入空格(v-model.trim) 选了多选框后必填
Vue--表单验证
qq_47518713的博客
10-19 703
【代码】Vue--表单验证。
vue---表单验证
weixin_52053631的博客
06-20 188
2. 创建表单验证插件 validate.js。3. 在main.js中引入表单验证插件。
关于Vue的表单验证
ly_yanbo的博客
03-29 7070
前言 最近在研究 Vue 如何实现表单的验证，在网上查阅资料以后，简单将这些方法整合一下，方便以后学习。如果有不准确之处，还望指正。 Vue 实现表单验证的方法有如下几种： 一、基于 Vue 与 jQuery 实现 之所以把这种方法放在第一位是因为这种方法与我们之前常用的很多方法类似，对于没接触过框架的人来说，这种方法更好上手。至于是否是最实用的或者用途最广的就另说了，并且这种方法充分提现了 Vu...
Vue.js 实现通用表单验证技巧
"本文将介绍如何在Vue.js框架中快速实现通用的表单验证，通过具体的示例代码，帮助开发者理解和应用。" 在Vue.js中，表单验证是必不可少的一个环节，尤其是在前后端分离的项目中，前端需要承担起更多的验证职责，以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值