当前位置: 首页 > 软件库 > Web应用开发 > Vue 组件 >

hai2007 vue-input-check

表单校验插件
授权协议 MIT
开发语言 JavaScript TypeScript HTML/CSS
所属分类 Web应用开发、 Vue 组件
软件类型 开源软件
地区 国产
投 递 者 程景胜
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

这是一个基于Vue.js开发的表单校验插件,可以提供HTML和JS两种方式的非法提示,并可以自定义校验规则,简单好用。

如何使用

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

npm install --save vue-input-check

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

import inputCheck from 'vue-input-check';

接着根据不同的vue版本注册:

vue2.js

import Vue from 'vue';
Vue.use(inputCheck);

vue3.js+

import { createApp } from 'vue';

let app = createApp(App);

app.use(inputCheck, {
    instance: app
});

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

<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

自定义校验规则

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

// 如果是vue3+,Vue改成app即可
Vue.use(inputCheck, {
 // 如果是vue3+,别忘了这个配置项
    instance: app,
// 自定义校验规则
    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.js 表单校验插件,包括了Vue.js 表单校验插件的使用技巧和注意事项,需要的朋友参考一下 Vuerify 是一个简单轻量的数据校验插件。内置基础的校验规则和错误提示。可自定义规则,规则类型支持正则、函数或者字符串。校验规则可全局注册也可以组件内注册。插件会给 vm 添加 $vuerify 对象,同时 watch 数据并校验合法性,如果有错误会存入 vm.$vuerify.

  • 本篇主要介绍使用 JavaScript 进行表单验证。 表单验证并不是 JavaScript 提供的某种特性,而是结合各种特性达到的一种目的,是需求的产物。 所有线上产品的表单几乎都有验证,如注册时要求“用户名 6-16 位”,验证会由 JavaScript 来完成,通常为了安全性和准确性,服务端会再次做一遍验证。 1. 验证目标 表单用于收集信息,从 HTML 上讲,表单内容使用 form 标签

  • 本文向大家介绍jQuery表单校验插件validator使用方法详解,包括了jQuery表单校验插件validator使用方法详解的使用技巧和注意事项,需要的朋友参考一下 validator插件:将jquery实现的常用操作进行封装,我们只需要学会插件的使用语法,就可以使用简单的代码实现较为复杂的功能。 validator的基本使用 1. 需要引入的文件 ① jQuery类库 ② 插件的js文件

  • 目前支持对以下格式的值进行验证:   cnum*-*(纯数字),   char*-*(纯字母),   zwen*-*(中文),   bysc*-*(字母开头),   mail(邮箱),   yzbm(邮政编码)      *    其中的‘*’表示长度,比如“zwen1-5”表示中文1-5位的长度。同时支持“zwen”(只能是中文),“zwen5-*”(5位长度的文字),其他的数据类型如同上面所示。      

  • 本文向大家介绍vue form check 表单验证的实现代码,包括了vue form check 表单验证的实现代码的使用技巧和注意事项,需要的朋友参考一下 vue-form-check  (基于vue的表单验证)具体实现代码如下所述: 安装 引用 调用 Component 补充:vue-form表单验证是否为空值 重点部分: 点击表单的 submit按钮 触发form 部分 @submit=”

  • 路过的大佬,应该怎么校验?麻烦大家啦: