vue 如何实现表单校验

 更新时间:2021年09月28日 16:54:15   作者:你好2007  
这篇文章主要介绍的是vue 如何实现表单校验的方法,又代码详细解说,感兴趣的小伙伴可以参考下面文章的具体内容

一、安装并使用

首先,在你的vue项目中进行安装:

npm install --save vue-input-check


安装完成以后引入并注册:

import inputCheck from 'vue-input-check';

// 安装
Vue.use(inputCheck);

然后,我们就可以在表单中使用了:

<form autocomplete="off" novalidate>
    <input v-model='key' name='输入框名称' v-input-check='[key,"validate-express"]'/>
    <!-- 可以有任意多的输入框 -->
</form>


如你所见,上述的v-input-check就是我们对每个输入框定义规则的地方,值是一个数组,第一个值就是输入框的v-model,第二个值是一个字符串,语法如下:

validate-express="val1:param1:param2|val2|valu3:param1"


不同的规则使用|分割,需要传递参数的规则的参数通过:分割。我们来看几个例子:

    v-input-check='[key,"required|maxLength:10|regexp:^\\d{1,5}$"]'
    v-input-check='[key,"required"]'


目前可选的内置规则如下:

    required:boolean:表示必输,有一个可选参数,表示是否必输,默认true
    maxLength:num:最大长度
    minLength:num:最小长度
    regexp:str:正则表达式

二、获取校验结果

页面的规则定义好了以后,你有两中方式获取校验的结果。

1.JS的方式

直接使用下列方法启动检查即可:

this.$validateCheck(formnode, callback, errorback);


此对象包含三个参数:

  •     formnode:需要校验的表单结点,必输
  •     callback:表单合法回调,可选
  •     errorback:表单非法回调,可选

此外,错误回调有一个形参,数据格式为:

{
    "$el":错误的输入框结点
    "$error":当前输入框的第一个错误提示信息
}

2.HTML的方式

提供这种方式的目的是为了可以在页面实时反馈当前表单的输入情况。

首先,在表单上,你可以通过判断class包含v-valid或者v-invalid来判断表单是否合法。

同样的,添加指令v-input-check的地方同样可以这样判断该处是否合法,而对于更具体的错误细节,比如必输非法,class就会像这样v-invalid-required v-invalid

三、自定义校验规则

在大部分情况下,我们还可能需要添加新的校验规则,毕竟默认的往往不足以满足所有业务情况:

Vue.use(inputCheck, {

    // 自定义校验规则
    validate: [{

        // 规则的名称
        name: "XXX",

        // 校验方法,返回true表示合法,false表示非法
        // 需要注意的是,这个函数除了el和val一定存在外,余下的参数是使用的时候通过```:```分割传递的,可以有任意多个
        // 比如:``` required:true|phone:parm1:param2 ```
        test: function (el, val, ...) {
            return true|false;
        },

        // 非法提示信息,应该返回一个字符串
        message: function (el, name) {
            return "XXX";
        }
    },
    // 校验规则可以有多条
    ......
    ]

});

到此这篇关于vue 如何实现表单校验的文章就介绍到这了,更多相关vue 实现表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue高德地图绘制行政区边界功能

    vue高德地图绘制行政区边界功能

    这篇文章主要介绍了vue高德地图绘制行政区边界功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-03-03
  • 解决VUE双向绑定失效的问题

    解决VUE双向绑定失效的问题

    今天小编就为大家分享一篇解决VUE双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 如何区分vue中的v-show 与 v-if

    如何区分vue中的v-show 与 v-if

    这篇文章主要介绍了如何区分vue中的v-show 与 v-if ,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-09-09
  • vue实现提示保存后退出的方法

    vue实现提示保存后退出的方法

    下面小编就为大家分享一篇vue实现提示保存后退出的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 解读vant的Uploader上传问题

    解读vant的Uploader上传问题

    这篇文章主要介绍了解读vant的Uploader上传问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue-router3.0版本中 router.push 不能刷新页面的问题

    vue-router3.0版本中 router.push 不能刷新页面的问题

    这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue2实现全局水印效果的示例代码

    Vue2实现全局水印效果的示例代码

    这篇文章主要为大家学习介绍了如何利用Vue2实现全局水印的效果,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
    2023-07-07
  • el-input输入校验不能为空格以及不能输入全部为空的内容

    el-input输入校验不能为空格以及不能输入全部为空的内容

    这篇文章主要给大家介绍了关于el-input输入校验不能为空格以及不能输入全部为空的内容的相关资料,el-input验证规则主要是为了确保输入的内容符合特定的要求,需要的朋友可以参考下
    2023-10-10
  • vue-cli的eslint相关用法

    vue-cli的eslint相关用法

    本篇文章主要介绍了vue-cli的eslint相关用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue+webpack中配置ESLint

    vue+webpack中配置ESLint

    这篇文章主要介绍了vue+webpack中配置ESLint,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论