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增加强缓存和版本号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue如何使用js对图片进行点击标注圆点并记录它的坐标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
这篇文章主要介绍了关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法，实现方法有两种，本文通过实例代码对每种方法介绍的很详细，需要的朋友参考下2018-12-12
这篇文章主要介绍了vue设计一个倒计时秒杀的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue组件化(ref,props, mixin,.插件)详解
这篇文章主要介绍了Vue组件化(ref, props, mixin, 插件)的相关知识,包括ref属性，props配置项及mixin混入的方式，本文通过示例代码多种方式相结合给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue element ui用户展示页面的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了关于vant的时间选择器使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)
这篇文章主要介绍了vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细
v-model 是 vue3 中的一个内置指令，很多表单元素都可以使用这个属性，如 input、checkbox 等，咱可以在自定义组件中实现 v-model，这篇文章主要介绍了Vue3 SFC 和 TSX 方式自定义组件实现 v-model,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue+springboot图片上传和显示的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论