[发明专利]基于Vue.js的表单校验方法及其系统

权利要求书

1.一种基于Vue.js的表单校验方法，其特征在于，包括：

创建表单元素组件；

预设与所述表单元素组件对应的校验规则信息；

若一表单元素组件的输入值发生改变，则表单校验插件根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验；

所述“创建表单元素组件”之后，进一步包括：

创建表单容器组件和表单元素适配器，表单元素适配器用于将所有的表单元素组件的属性入参以及公有的方法统一，使得所有表单组件对外暴露的接口保持一致；

将所述表单元素组件通过所述表单元素适配器注册到所述表单容器组件上；

根据表单容器组件中预设的配置信息，实例化所述表单容器组件；

根据表单元素组件中预设的配置信息，实例化所述表单元素组件；

所述“预设与所述表单元素组件对应的校验规则信息”具体为：

创建表单校验插件；

预设与表单元素组件对应的校验规则信息，得到表单元素组件与其对应的校验规则信息的关联关系；

将所述关联关系保存至所述表单校验插件中；

将所述校验规则信息保存至所述表单容器组件中。

2.根据权利要求1所述的基于Vue.js的表单校验方法，其特征在于，所述“根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验”之后，进一步包括：

若所述输入值不符合校验规则信息，则显示对应所述校验规则信息的错误提示信息。

3.根据权利要求1所述的基于Vue.js的表单校验方法，其特征在于，所述“若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验”具体为：

判断一表单元素组件的输入值是否发生改变；

若是，则表单校验插件根据所述关联关系，从表单容器组件中获取与所述一表单元素组件对应的校验规则信息；

表单校验插件根据所述对应的校验规则信息，对所述一表单元素组件的输入值进行校验，得到校验结果；

表单校验插件将所述校验结果发送至表单容器组件。

4.根据权利要求3所述的基于Vue.js的表单校验方法，其特征在于，所述“表单校验插件将所述校验结果发送至表单容器组件”之后，还包括：

表单容器组件将所述校验结果与预设的符合校验规则的结果进行比对，判断是否一致；

若不一致，则显示对应所述校验规则信息的错误提示信息。

5.一种基于Vue.js的表单校验系统，其特征在于，包括：

第一创建模块，用于创建表单元素组件；

预设模块，用于预设与所述表单元素组件对应的校验规则信息；

校验模块，用于若一表单元素组件的输入值发生改变，则表单校验插件根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验；

还包括：

第二创建模块，用于创建表单容器组件和表单元素适配器，表单元素适配器用于将所有的表单元素组件的属性入参以及公有的方法统一，使得所有表单组件对外暴露的接口保持一致；

注册模块，用于将所述表单元素组件通过所述表单元素适配器注册到所述表单容器组件上；

第一实例化模块，用于根据表单容器组件中预设的配置信息，实例化所述表单容器组件；

第二实例化模块，用于根据表单元素组件中预设的配置信息，实例化所述表单元素组件；

所述预设模块包括：

创建单元，用于创建表单校验插件；

预设单元，用于预设与表单元素组件对应的校验规则信息，得到表单元素组件与其对应的校验规则信息的关联关系；

第一保存单元，用于将所述关联关系保存至所述表单校验插件中；

第二保存单元，用于将所述校验规则信息保存至所述表单容器组件中。

6.根据权利要求5所述的基于Vue.js的表单校验系统，其特征在于，还包括：

第一显示模块，用于若所述输入值不符合校验规则信息，则显示对应所述校验规则信息的错误提示信息。