jeecg前端表单验证

原理

对于前端的表单，一般来说就是在data中写入对象，然后在方法中使用调用ajax请求，从而传递表单中的参数到后端
但是在jeecg中传递参数的方法已经写好了，这样基础的方法放到了api.vue中，前端是要调用这个方法就好了

代码

首先应用有着传递参数作用的api

 import {editUser} from '@/api/api'

再从data中返回一个关于 model的字符对象，用来带回来这些参数

data () {
      return {      
      model: {},
      }

方法中调用editUser方法

  handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          this.model.id = this.$store.getters.userInfo.id
          editUser(this.model).then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              // that.close()
            })
        } else {
          return false
        }
      })
    },

这段代码是一个表单提交的处理函数。具体解释如下：

定义常量 that，用于保存当前上下文的引用。
通过 $refs 获取表单组件的引用，并调用 validate 函数触发表单验证。
在回调函数中，判断表单是否通过验证（valid 参数为 true），如果通过则执行以下操作：
将 confirmLoading 设置为 true，用于显示加载状态。
将 model 对象的 id 属性设置为当前用户信息的 ID。
调用 editUser 函数进行用户编辑，并通过 then 方法获取编辑结果。
根据返回结果的 success 字段判断编辑是否成功，如果成功则显示成功消息，并触发 ok 事件；否则显示警告消息。
无论成功还是失败，最后都将 confirmLoading 设置为 false，表示加载结束。
如果表单未通过验证，则直接返回 false。
需要注意的是，部分代码注释掉了 that.close()，可能是暂时不需要的代码，可以根据实际情况进行处理。

handleSubmit（）{
		CONST  that = this
	    this.$refs.form。validate（
	    vaild =>that.confirmLoading = true
	    //通过将 this.$store.getters.userInfo.id 赋值给 this.model.id，可以将 				 Vuex 存储中的用户 ID 属性值同步到组件的 model 对象中。这样做的目的可能是为了在组件中方便地访问和操作该用户的 ID 数据，或者将其用于其他业务逻辑。
	    this.model.id = this.$store.getters.userInfo.id
	    editUser(this.model).then(res =>{
	    if(res.success){
	    that.$message.success(res.message)
        that.$emit('ok')
`		}else
		{
		that.$message.warning(res.message)
		}
	    })
	    .finally(() => {
	    that.confitmLoading = false})
	    }else{
	    return false
	    }
}

在主页面的头部写上

 <a-form-model ref="form" :model="model" :rules="validatorRules">

关于这个标签，解释为：
这是一个使用了 Ant Design Vue（antdv）中的 组件的示例。

是 Ant Design Vue 提供的一个表单组件，用于实现数据绑定和表单验证。它是一个基于 Vue 的表单封装组件，可以通过 ref 属性引用并进行操作。

在代码中，ref=“form” 表示将 组件实例赋值给组件实例的 $refs属性中的form属性。通过this.$refs.form，可以访问到表单组件的实例，并调用其提供的方法和属性。

:model=“model” 表示将 model 对象绑定到 的 model 属性上，实现数据的双向绑定。model 对象通常包含了表单中各个字段的值，当用户输入或选择时，model 对象会自动更新，反之亦然。

:rules=“validatorRules” 表示将 validatorRules 对象绑定到 的 rules 属性上，用于指定表单字段的验证规则。validatorRules 对象通常包含了每个字段的验证规则配置，例如必填、最大长度、格式等规则。这样，在用户提交表单或手动触发验证时，会根据这些规则对表单字段进行验证。

通过使用 组件，可以方便地创建带有数据绑定和表单验证功能的表单，提高开发效率并提供更好的用户体验。