精华内容
下载资源
问答
  • vue表单验证插件
    2020-12-24 20:07:42

    vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+

    import VueForm from 'vue-form';

    // install globally

    Vue.use(VueForm);

    Vue.use(VueForm, options);

    // or use the mixin ...

    mixins: [VueForm]

    ...

    mixins: [new VueForm(options)]

    ...

    2.案例

    使用bootstrap样式的案例?https://jsfiddle.net/fergal_doyle/zfqt4yhq/

    密码验证的案例https://jsfiddle.net/fergal_doyle/9rn5kLkw/

    3.使用方法

    template:

    Name *

    Success!
    Name is a required field

    Email

    Email is a required field
    Email is not valid

    Submit

    scriptdata(){

    return{

    formstate: {},

    model: { name: '', email: 'invalid-email' } },

    }

    methods: {

    onSubmit: function () {

    if(this.formstate.$invalid) {

    // alert user and exit early

    return;

    }

    // otherwise submit form

    }

    }

    vue 中可直接通过FormData的方式提交数据 要获取该表单的所有数据 可给vue-form 添加ref属性来获取?let def = this.$refs.sendinfo.$el;

    验证信 息显示

    该插件使用field-messages标签来定义验证正确和错误的文字或其他形式的提示内容

    show 表示表单在何种状态下开始验证 vue-form 内置有$dirty,?$dirty && $touched,?$dirty || $touched,?$touched || $submitted

    示例:

    Error message A
    Error message B

    使用scope template

    Success

    Name is a required field

    Error message B

    vue-form Validators

    默认自带验证类型type="email"

    type="url"

    type="number"

    required

    minlength

    maxlength

    pattern

    min (for type="number")

    max (for type="number")

    使用方法

    自定义验证

    你可以全局或者局部注册自定义验证

    全部注册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)]

    局部注册

    // ...

    methods: {

    customValidator: function (value) {

    // return true to set input as $valid, false to set as $invalid

    return value === 'custom';

    }

    }

    // ...Async 验证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);

    });

    }

    }重置验证

    resetState: function () {

    this.formstate._reset();

    // or

    this.$refs.form.reset();

    }

    未完待续.....

    更多相关内容
  • vue表单验证插件

    2019-08-10 01:39:36
    在使用vue做项目的过程中,做表单验证通常需要事件绑定、数据双向绑定等才能完成一个验证操作,多个验证往往会有重复代码,所以就想写一个表单验证插件
  • Vue-validator 是Vue表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <form novalidate> <label for=username>username: <input type=text id=...
  • 主要为大家详细介绍了Vue表单验证插件的制作过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue.js表单验证插件(vee-validate)的使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 最近写了一个vue表单验证插件,第一次写插件,其中的一些设计模式不够优化,产品逻辑不够成熟,但作为自己的第一个完成的插件,写完了还是觉得小有收获的,特此记录。 目标 主要目标:将需要绑定验证的表单元素...

    最近写了一个vue的表单验证插件,第一次写插件,其中的一些设计模式不够优化,产品逻辑不够成熟,但作为自己的第一个完成的插件,写完了还是觉得小有收获的,特此记录。

    目标
    主要目标:将需要绑定验证的表单元素根据绑定的规则进行验证,验证通过则可进行表单提交(规则通过后由用户编写通过后程序逻辑)

    整体思路
    在这里插入图片描述

    具体思路
    1.vue实例中自定义部分
    表单验证主要需要三种信息:1.用户自定义规则;2.提示信息;3.验证的时机
    每条输入的规则可能是多个的,对应的提示信息也不相同,此处均供用户自己填写,形如

    <input type="text" id="test" v-vva:test="{length: /^.{5}$/, valid: /^\w+$/}" v-vva-msg="{length: '长度必须为五个字符', valid: '必须位有效字符'}">
    <input type="button" v-vva-check value="校验">
    

    下面参照vue自定义指令文档说明来解释一下:
    在这里插入图片描述
    v-vva为自定义指令,:test (arg)为验证规则名称,每个实例中验证规则名称必须确保唯一性,{length: /^.{5}KaTeX parse error: Undefined control sequence: \w at position 13: /, valid: /^\̲w̲+/} (value)为用户自定义的规则,其中属性名代表用户为每个规则添加的标识,和v-vva-msg中相互对应。v-vva-msg为用户自定义的提示信息,根据不同的未成功校验的值显示对应的提示信息。
    点击含有v-vva-check指令的元素后将对每个添加有v-vva指令的元素进行校验。校验通过后,会调用该vue实例的vva_submit()方法,如:

    methods: {
        vva_submit: function() {
          alert('已经成功通过校验')
        }
      }
    

    实际上这地方我是想可以实现v-vva-check="fn"的形式,当通过校验后调用fn,无奈作为vue小白一枚,这里的value出现问题,因此先采用这样的权宜之计,以后再分析问题原因。

    2.vva.js
    vue文档中说明,编写vue插件需要提供install方法,因此主要在install中添加事件监听方法和自定义指令。
    我想实现这种效果:点击校验按钮,未通过校验的输入框均为红框,提示消息出现在第一个红框上,之后用户每次更改输入值均会进行校验,提示消息始终出现在第一个未通过校验的输入框中,若第一个输入值已通过校验,提示消息会提示剩下未通过校验的第一个输入框。
    写了几天的代码,今天回想起来,在vva.js中主要也就做了两件事:

    校验未通过则增加标识类名
    利用观察者连接未通过的表单元素与提示消息框
    剩下的也就是校验逻辑,何时生成消息、何时调用消息、何时摧毁消息,以及各个功能的细化拆分以及提升鲁棒性。
    反思一下,写这样的程序必须要对整个事件的流程和设计有一个清晰的规划。这一点我开始没有做好,绕了不少弯子。

    3.tooltip.js
    校验未通过后调用的气泡工具,提供显示、隐藏、生成、摧毁的功能。
    项目地址参见Git

    不满意的地方:除了文中提到的通过校验后的调用方法外,vva.js和tooltip.js未做到完全分离,实际上vva.js应该只做校验的事情,vva.js与tooltip.js之间的耦合的越少越好,然而在vva.js中出现了多次生成、摧毁冒泡的地方,这样的方式不够干净。

    作者:小前seant
    链接:https://www.jianshu.com/p/70e656ebdeba
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • vue表单验证插件 vuerify

    千次阅读 2018-08-19 18:17:47
    表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会...目前也有一些基于vue表单验证插件,一开始试用了几款效果不太理想,最后找到了一个比较的适合的 [color=#ff0000]vuerify[/colo...

    表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此.
    当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在vue中引用jQuery的话,只得另寻他法.
    目前也有一些基于vue表单验证的插件,一开始试用了几款效果不太理想,最后找到了一个比较的适合的 [color=#ff0000]vuerify[/color]

    使用文档

    Vuerify 是一款轻量级的数据校验 Vue 插件,同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则,也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象,会对声明的数据进行 watch,实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。

    安装

    javascript 代码

    npm i vuerify -S
    初始化插件

    javascript 代码

    import Vue from 'vue'
    import Vuerify from 'vuerify'
    
    Vue.use(Vuerify/*, 添加自定义规则,默认提供了 email, required, url 等规则 */)

    添加自定义规则
    javascript 代码

    {
      phone: {
        test: /^\d{11}$/,
        message: '十一位手机号'
      }
    }

    全局添加自定义规则 demo如下
    javascript 代码

    import Vuerify from 'vuerify';
    Vue.use(Vuerify, {
      phone: {
        test: /^\d{11}$/,
        message: '十一位手机号'
      }
    });
    使用

    javascript 代码

    <template>
        <div class="hello">
            <h1>{{ msg }}</h1>
            <form>
                <input type="text" v-model="username" placeholder="输入用户名">
                <input type="password" v-model="password" placeholder="请输入密码">
                <input type="password" v-model="rePass" placeholder="请确认密码">
                <input type="email" v-model="email" placeholder="输入邮箱">
                <input type="tel" v-model="phone" placeholder="输入电话">
                <input type="button" @click="handleSubmit" value="提交">
                <ul>
                    <li v-for="(err, index) in errors" :key="index" v-text="err"></li>
                </ul>
            </form>
    
        </div>
    </template>
    
    <script>
    export default {
        name: 'hello',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                username: '',
                password: '',
                rePass: '',
                email: '',
                phone: ''
            }
        },
        computed: {
            errors() {
                console.log(this.$vuerify);
                return this.$vuerify.$errors // 错误信息会在 $vuerify.$errors 内体现
            }
        },
        vuerify: {
            username: {
                test: /\w{4,}/,  // 自定义规则,可以是函数,正则或者全局注册的规则(填字符串)
                message: '至少 4 位字符'
            },
            password: 'required', // 使用全局注册的规则
            rePass: {
                test: function() {
                    if (this.rePass !== this.password) {
                        return false;
                    } else {
                        return  ture;
                    }
                },
                message: '两次密码输入不一致'
            },
            email: [ // 支持传入数组
                'required',
                'email',
                { test: /@gmail/, message: '只能是谷歌邮箱' }
            ],
            phone: 'phone' // 使用全局自定义规则
        },
        methods: {
            handleSubmit() {
                if (this.$vuerify.check()) { // 手动触发校验所有数据
                    // do something
                    alert('验证通过');
                } else {
                    alert('验证不通过');
                }
            }
        },
        mounted() {
    
        }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1,
    h2 {
        font-weight: normal;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    li {
        display: inline-block;
        margin: 0 10px;
    }
    
    a {
        color: #42b983;
    }
    
    </style>

    当然如果我想把所有的验证的字段包含到一个验证对象中去呢? 好吧,没问题,如下demo,效果一样
    javascript 代码

    <template>
        <div class="hello">
            <h1>{{ msg }}</h1>
            <form>
                <input type="text" v-model="loginInfo.username" placeholder="输入用户名">
                <input type="password" v-model="loginInfo.password" placeholder="请输入密码">
                <input type="password" v-model="loginInfo.rePass" placeholder="请确认密码">
                <input type="email" v-model="loginInfo.email" placeholder="输入邮箱">
                <input type="tel" v-model="loginInfo.phone" placeholder="输入电话">
                <input type="button" @click="handleSubmit" value="提交">
                <ul>
                    <li v-for="(err, index) in errors" :key="index" v-text="err"></li>
                </ul>
            </form>
    
        </div>
    </template>
    
    <script>
    export default {
        name: 'hello',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                loginInfo: {
                    username: '',
                    password: '',
                    rePass: '',
                    email: '',
                    phone: ''
                }
            }
        },
        computed: {
            errors() {
                console.log(this.$vuerify);
                return this.$vuerify.$errors // 错误信息会在 $vuerify.$errors 内体现
            }
        },
        vuerify: {
            'loginInfo.username': {
                test: /\w{4,}/,  // 自定义规则,可以是函数,正则或者全局注册的规则(填字符串)
                message: '至少 4 位字符'
            },
            'loginInfo.password': 'required', // 使用全局注册的规则
            'loginInfo.rePass': {
                test: function () {
                    if (this.loginInfo.rePass !== this.loginInfo.password) {
                        return false;
                    } else {
                        return true;
                    }
                },
                message: '两次密码输入不一致'
            },
            'loginInfo.email': [ // 支持传入数组
                'required',
                'email',
                { test: /@gmail/, message: '只能是谷歌邮箱' }
            ],
            'loginInfo.phone': 'phone' // 使用全局自定义规则
        },
        methods: {
            handleSubmit() {
                if (this.$vuerify.check()) { // 手动触发校验所有数据
                    // do something
                    alert('验证通过');
                } else {
                    alert('验证不通过');
                }
            }
        },
        mounted() {
    
        }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1,
    h2 {
        font-weight: normal;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    li {
        display: inline-block;
        margin: 0 10px;
    }
    
    a {
        color: #42b983;
    }
    
    </style>

    对于具有两个及两个以上验证规则的字段,他的错误信息将包含在一个数组里,即使错误信息只有一条,同样包含在一个数组里面.
    如果只有一个验证规则,那么错误信息将是一个字符串类型.

    $vuerify 包含如下属性

    name description type default Value
    $errors 数据校验失败的错误信息, 例如 username 校验失败会返回 { username: ‘至少 4 位字符’ };如果 username 是数组,那么这里返回的也是数组类型 Object {}
    invalid 存在校验失败的字段 Boolean true
    valid 不存在校验失败的字段 Boolean false
    check 检查指定字段,传入数组,返回 Boolean Function(Array) -
    clear 清空错误列表 Function -

    具体API文档的话,见 帮助文档

    展开全文
  • VUE 表单验证插件

    千次阅读 2019-04-26 16:37:32
    /** * VUE 表单验证插件 * User: liupeilong * Date: 2019/4/26 * Time: 10:50 */ var validation = { install:function(Vue, options){ var validationConfig = { listenerEvent:"change", ...

    /**
     * VUE 表单验证插件
     * User: liupeilong
     * Date: 2019/4/26
     * Time: 10:50
     */
    var validation = {
        install:function(Vue, options){
            var validationConfig = {
                listenerEvent:"change",
                validationMsg:function( context , el = null ){
                    layer.msg(context);
                },
                validationLanguage:{
                    required:"参数不能为空",
                    email:"邮箱格式不正确",
                    numeric:"参数值不是数字",
                    datetime:"参数值只能是时间日期格式",
                    date:"参数值只能是日期格式",
                    enumeration:"参数值不在枚举项中",
                },
            }

            var elements = {};
            var validationHandle = function(el,binding){
                for(index in binding.value){
                    if( !validationObg[index](binding.value[index],el.value.replace(/(^\s*)|(\s*$)/g,"")) ){
                        validationConfig.validationMsg(validationConfig.validationLanguage[index]);
                        return false;
                    }
                }
                return true;
            }
            var validationObg = {
                //不能为空
                required:function( boolean , value ){
                    if( boolean == true ){
                        if( !value || value == undefined ){
                            return false;
                        }
                    }
                    return true;
                }
                //是否邮箱
                ,email:function( binding , str ){
                    if(str==null||str=="") return false;
                    var result=str.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
                    if(result==null)return false;
                    return true;
                }
                //是否是数字
                ,numeric:function( binding , value ){
                    var regPos = /^\d+(\.\d+)?$/; //非负浮点数
                    var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
                    if(regPos.test(value) || regNeg.test(value)){
                        return true;
                    }
                    return false;
                }
                //判断是否是时间日期 2019-04-28 10:12:12
                ,datetime:function( binding , value ){
                    var a = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/
                    if( !a.test(value) ) { 
                        return false 
                    } 
                    return true 
                }
                //判断是否是日期 2019-04-28
                ,date:function( binding , value ){
                    var a = /^(\d{4})-(\d{2})-(\d{2})$/
                    if( !a.test(value) ) { 
                        return false 
                    } 
                    return true 
                }
                //判断是否是枚举中的值
                ,enumeration:function( binding , value ){
                    if( binding.indexOf(value) == -1 ){
                        return false;
                    }
                    return true;
                }
            }
            Vue.directive('validate',function(el, binding, vnode, oldVnode){
                elements[el.name] = {el:el,binding:binding,}
                el.addEventListener(validationConfig.listenerEvent, function(e){
                    validationHandle(el,binding);
                });
            });

            Vue.mixin({
                created:function(){
                },
                updated:function(){

                }
            });
            Vue.prototype.$validationCheck = function( input_name ) {
                validationHandle(elements[input_name].el,elements[input_name].binding);
            }
            Vue.prototype.$validationCheckAll = function() {
                for( index in elements ){
                    if( !validationHandle(elements[index].el,elements[index].binding) ){
                        return false;
                    }
                }
            }
        }
    }
    Vue.use(validation);

    展开全文
  • 今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程,需要的朋友可以参考下
  • 基于Vue表单通用验证插件
  • 安装插件 cnpm install vee-validate#2.0.0-beta.13 --save 我一开始用npm install vee-validate@next --save下载的是4的版本,找不到如下图 已经下载4的版本,请先删掉cnpm uninstall vee-validate,或许是我项目...
  • 这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢? vue-validator呀。 我想了下,一个是表单验证是个高度...
  • 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置...
  • Vue表单验证 Vue有许多插件,Vue插件 vee-validate:vue最好的验证插件。vee-validate 1. vee-validate自然输入校验 使用步骤: 安装: npm i vee-validate 创建独立校验文件utils/validate.js,导入默认校验...
  • vee-validate 一个轻量级的 vue表单验证插件。 2、使用教程 具体步骤请参照官网 - 安装 npm install vee-validate --save - main.js 添加 import Vue from 'vue import VeeValidate, {Validator} from 'vee-validate...
  • vue3-form-validation 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 当我们在业务中碰到痛点问题的时候,会导致...现在来介绍下如何处理表单验证问题,在大多数与后端通信的场景中,表单验证是一个不可避免的问题。它承载了许多的逻辑以及状态,在某些过于复杂的场景中,会使得导致...
  • vue表单验证插件 vue-verify-plugin V2.0

    千次阅读 2017-07-25 16:48:36
    verifygithub:https://github.com/liuyinglong/verify npm:https://www.npmjs.com/package/vue-verify-plugininstallnpm install vue-verify-pluginuse<template> <di
  • vue.js 表单验证插件 验证 (vee-validate) vee-validate is a plugin for Vue.js that allows you to validate input fields, and display errors. vee-validate是Vue.js的插件,它使您可以验证输入字段并显示错误...
  • Vue官网提供表单验证 使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 4:注册插件的时候,用中文,以及需要验证的字段【用中文显示...
  • 这段时间开发的时候使用到了这个表单校验插件,用起来比较麻烦就不说了,还有较严重的缺陷。自己最终还是抽空把这个插件进行了一些优化,虽然优化的方式和当初自己定下的方向不怎么相同,但是就使用体验上来说还是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,788
精华内容 2,315
关键字:

vue表单验证插件