【技术实现步骤摘要】
基于VUE的校验表单组件实现方法
本专利技术涉及前端开发
，具体是一种以vue为基础框架，利用后台接口实现提交请求和校验、显示错误信息一体化的表单组件实现方法。
技术介绍
表单校验是前端发开过程中一个十分重要的环节，通常讲表单校验由前端的校验和后端的校验两部分构成，前端的校验主要负责做基本的类型校验以及错误信息提示等，后端的校验主要负责校验数据的合法性、过滤非法字符和用户的权限以及数据之间的一致性等问题。通过前后端的校验机制，基本实现了用户交互的友好性和数据的一致性。但是，这种前后端的校验也存在着许多的问题。第一点，由于前段和后端的校验规则是由前端和后端的开发人员单独编写的，有可能会出现前端和后端校验规则不一致的问题，虽然最终的校验是由后台来完成的，不会造成数据错误的问题，但是会对用户体验造成非常严重的影响。第二点，前端和后端要有相应的文档来约定校验的规则，增加了沟通成本，也降低了开发的效率。目前拥有的异步校验方案，主要是通过在相应的输入框或者选择框内通过监听事件，来将数据提交给单独的后端接口，根据后端...
【技术保护点】
1.一种基于VUE的校验表单组件实现方法，其特征在于：表单组件初始化时定义表单的绑定数据formdata，表单的子组件设置需要校验的数据的key值；用户输入完数据后，通过HTTP请求将数据提交给后端；若数据校验通过，执行相应的操作，并将执行结果返回给前端；若数据校验未通过，则向前端返回错误的键值名称以及错误的信息；前端收到后台返回的结果，若成功则提示操作成功；如果失败，则根据响应的状态码来显示错误信息；如果状态码不为400，则直接显示后台返回的报错信息；如果状态码为400，则根据后台返回的JSON数据将所有的错误信息根据键值显示到相应的表单对象旁。/n
【技术特征摘要】
1.一种基于VUE的校验表单组件实现方法，其特征在于：表单组件初始化时定义表单的绑定数据formdata，表单的子组件设置需要校验的数据的key值；用户输入完数据后，通过HTTP请求将数据提交给后端；若数据校验通过，执行相应的操作，并将执行结果返回给前端；若数据校验未通过，则向前端返回错误的键值名称以及错误的信息；前端收到后台返回的结果，若成功则提示操作成功；如果失败，则根据响应的状态码来显示错误信息；如果状态码不为400，则直接显示后台返回的报错信息；如果状态码为400，则根据后台返回的JSON数据将所有的错误信息根据键值显示到相应的表单对象旁。
2.根据权利要求1所述的基于vue的校验表单组件实现方法，其特征在于，具体步骤如下：
步骤1，在vue项目的入口文件main.js中通过import命令引入检验表单组件，并用vue.use方法将组件注入到vue实例中；
步骤2，在需要用到校验表单的部分调用表单组件，并且设置好相应的数据；
步骤3，输入数据后将数据和请求一起提交给后台，等待后台返回请求的结果；
步骤4，后台返回结果后，根据返回的状态码和内容将成功或失败的信息以不同的方式显示给用户。
3.根据权利要求1所属的基于vue的校验表单组件实现方法，其特征在于，步骤1的具体实现方法为：
1.1新建vue组件，编写表单组件的父组件，作为整个表单组件的整体容器，包括表单的整体布局，子组件默认插槽的位置，以及样式规则，需要绑定的表单数据；
1.2新建vue组件，编写表单组件的子组件，作为表单的单个数据校验项，需要绑定的数据为父组件中表单数据对应的键值名称；并在子组件中定义默认插槽的位置，以及错误信息显示标签，以及相应的样式；
1.3在main.js中分别导入父组件和子组件，并将组件注入到vue实例中。
4.根据权利要求1所属的基于vue的校验表单组件实现方法，其特征在于，步骤2的具体实现方法为：
2.1在需要用到表单的组件中，先调用步骤1中所述的父组件，并在属性中将表单需要绑定的数据通过v-bind:value绑定，之后再设置相应的样式和其他需要设置的内容；
2.2父组件属性设定完成之后，在父组件内部通过默认插槽调用子组件，将子组件的v-bind:validate-key设置为该表单项所需要校验的数据键值名称，设置完成后在子组件内部编写需要展示的表单项内容，表单项组件绑定的数据v-model需与子组件属性中设置的validate-key指向同一键值。
5.根据权利要求1所属的基于vue的校验表单组件实现方法，其特征在于，步骤3的具体实现方法为：
3.1表单组件首...
【专利技术属性】
技术研发人员：郑成辉，刘振威，李文康，徐朋，胡鼎峰，裴仁胜，徐福，王喜，赖海光，魏武，
申请(专利权)人：南京控维通信科技有限公司，
类型：发明
国别省市：江苏;32
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。