vue表格校验,vue3表单校验

　　本文主要介绍了vue如何实现表单验证的方法，并对代码进行了详细说明。感兴趣的伙伴可以参考下面这篇文章的具体内容。

一、安装并使用

　　首先，在你的vue项目中进行安装：

　　npm安装-保存vue-输入-检查

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

　　从“vue-input-check”导入inputCheck

　　//安装

　　vue . use(input check)；

　　然后，我们就可以在表单中使用了：

　　表单自动完成=off novalidate

　　V-model= key name=输入框名称 v-input-check= [key， validate-express]/

　　！-可以有任意数量的输入框-

　　/表单

　　如您所见，上面的v-input-check是我们为每个输入框定义规则的地方。这些值是一个数组，第一个值是输入框的垂直模型，第二个值是一个字符串，语法如下：。

　　validate-express= val 1:param 1:param 2 val 2 val 3:param 1

　　不同的规则使用 split，需要传递参数的规则的参数传递：split。我们来看几个例子：

　　v-input-check=[key,requiredmaxlength:10regexp:^\\d{1,5}$]

　　v-input-check=[key，必选]

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

　　必选：boolean:必选；有一个可选参数来指示它是否是必需的；默认值为true。

　　最大长度：数量：最大长度

　　MinLength:num:最小长度

　　正则表达式

二、获取校验结果

　　在定义了页面规则之后，您有两种方法来获得验证结果。

1.JS的方式

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

　　这个。$validateCheck(formnode，callback，error back)；

　　此对象包含三个参数：

　　Formnode:要验证的表单节点，必选。

　　Callback:表单的合法回调，可选

　　Errorback:表单的非法回调，可选

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

　　{

　　“$el”:错误的输入框节点

　　“$error”:当前输入框的第一条错误信息

　　}

2.HTML的方式

　　该方法的目的是提供页面上当前表单输入的实时反馈。

　　首先在表单上，你可以通过判断类包含v-valid还是v-invalid来判断表单是否合法。

　　同样，在添加指令v-input-check的地方，也可以判断是否合法。对于更具体的错误细节，比如非法输入，该类将类似于v-invalid-required v-invalid。

三、自定义校验规则

　　大多数情况下，我们可能还需要添加一个新的验证规则，毕竟默认的往往不足以满足所有业务情况：。

　　Vue.use(输入检查，{

　　//用户定义的验证规则

　　验证：[{

　　//规则的名称

　　姓名： XXX ，

　　//检查方法，合法返回true，非法返回false。

　　//需要注意的是，这个函数的其余参数都是通过```: ````传递的，除了el和val必须存在，可以有任意多个。

　　//比如：` ``` required:true phone:parm 1:param 2 ` ` ````。

　　测试：函数(el，val，) {

　　返回true false

　　},

　　//非法提示信息，应返回字符串

　　消息：函数(el，name) {

　　返回“XXX”；

　　}

　　},

　　//可以有多个验证规则。

　　.

　　]

　　});

　　这就是这篇关于vue如何实现表单验证的文章。有关vue如何实现表单验证的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。