vue3 行内校验规则 rules validate校验

最新推荐文章于 2024-09-13 09:07:09 发布

懒是一种态度

最新推荐文章于 2024-09-13 09:07:09 发布

阅读量5.4k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/shengshuai/article/details/131827714

版权

该代码段展示了一个在Vue.js应用中进行表单验证和数据提交的过程。函数doSave()在表单验证通过后调用httpPost方法向服务器发送POST请求保存项目，同时处理成功和失败的回调。表单使用el-form组件，并定义了校验规则。

摘要由CSDN通过智能技术生成

const form2 = ref()
function doSave() {
  loading.value = true;

  form2.value.validate((valid: any) => {
    if (valid) {
      httpPost({ method: "project.save", form: form.value }).then((res: any) => {
        emit("afterSave", "");
        if (res.status == 200) {
          alert(res.msg);
        }
        loading.value = false;
      }).catch(() => {
        loading.value = false;
      });
    } else {
      alert("请按提示完善表单项目")
      loading.value = false;
    }
  })
}






<el-form ref="form2" :model="form" label-width="80px">
<el-form-item label="名称" prop="名称" required
                :rules="[{ required: true, message: '此项不能为空', trigger: 'blur' }]">
                <el-input autoComplete="off" v-model="form.名称" clearable placeholder="请输入名称" />
              </el-form-item>
<el-button :loading="loading" type="primary" @click="doSave">
          <span v-if="!loading"> 保 存 </span>
          <span v-else>提 交 中...</span>
        </el-button>
</el-form>