这是一个基于Vue.js开发的表单校验插件，可以提供HTML和JS两种方式的非法提示，并可以自定义校验规则，简单好用。
如何使用首先，在你的vue项目中进行安装：
npminstall--savevue-input-check安装完成以后引入并注册：
importinputCheckfrom'vue-input-check';接着根据不同的vue版本注册：vue2.jsimportVuefrom'vue';Vue.use(inputCheck);vue3.js+import{createApp}from'vue';letapp=createApp(App);app.use(inputCheck,{instance:app});然后，我们就可以在表单中使用了：
<formautocomplete="off"novalidate><inputv-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:表示必输，有一个可选参数，表示是否必输，默认truemaxLength: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-requiredv-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,...){returntrue|false;},//非法提示信息，应该返回一个字符串message:function(el,name){return"XXX";}},//校验规则可以有多条......]});
评论