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

概观

名称：vee-validate

用途：简单的Vue.js表单验证插件

官方网站：地址

Github:地址

特别提示

与laravel一起使用特别好，因为身份验证规则与laravel后端的规则相同

插件可以同时应用于SPA和多页，用途广泛

装置

单页安装

npm安装vee-验证-保存

浏览器安装

！-unpkg-script src=' http :3359 unpkg.com/[email protected]'/script介绍项目

单页简介

从“Vue”导入Vue；从“vee-validate”导入VeeValidatevue . use(VeeValidate)；浏览器介绍

script src=' http : path/to/vue . js '/script script src=' http :https://unpkg.com/[email protected]'/script script vue . use(veevaluate)；//很好。/script基本用途

div class=' column is-12 ' label class=' label ' for=' Email ' Email/label p : class=' { ' control ' : true } ' input v-validate=' ' required | Email ' : class=' { ' input ' : true '，' is-dancer ' : errors . has(' Email ')} ' name=' Email ' type=' text ' placeholder=' Email ' span v-show=' errors (' Email

v-validate=“‘requiremail’”v-validate是插件提供的作用于html的指令

对于通过“‘必需的电子邮件’”字段验证的规则，请注意双引号内必须有单引号。如果通过连接错误无法验证多个规则。第一个(“电子邮件”)电子邮件字段，将显示相关的提示信息

验证规则

地址

继续教育

本地化

本地化功能可以将错误提示改为中文

单页使用

在浏览器中使用

vardict={ zh _ cn : { messages : {必需的：函数(字段){返回'请输入'字段；}，确认：函数(字段){返回'两次输入的密码不一致'；}}，属性： {旧密码： '旧密码'，新密码： '新密码'，确认新密码： '确认密码'，} }；VeeValidate。Validator.localize('zh_CN '，dict . zh _ CN)；vue . use(VeeValidate)；Var app=new Vue({//省略})；代码解析

VeeValidate(在浏览器引入js后建立一个全局对象)

Dict翻译内容，其中属性对象代表字段，消息对象代表提示信息

进一步提及本地化

通用方法

渲染时出错

当字段验证失败时呈现提示信息时使用

错误。first ('field ')显示字段错误中的第一条错误消息。收集('字段')显示字段错误中的所有错误消息。has ('field ')判断fileds字段是否检查不正确erros.all()显示所有错误消息errors.any()判断是否有手动检查的错误。

常用于数据提交(写在vue的方法中)

这个。$ validator . validate(' field ')；验证单个字段。$ validator . validate all()；用于表单整体验证的代码片段

这个。$验证器。validateall()。然后(函数(结果){if(结果){//成功操作} else {//失败操作}})检查信息清除

它通常用于在成功验证后清除错误消息

this . errors . clear()；

原料药的进一步研究

摘要

以上是边肖介绍的vue.js表单验证插件(vee-validate)使用教程的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！