element单独检验form表单中的一项

最新推荐文章于 2024-07-08 15:30:38 发布

曲小强

最新推荐文章于 2024-07-08 15:30:38 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/132344981

本文介绍了如何在使用Vue和ElementUI构建的表单中，实现输入框验证（limitDays和limitCount）并点击按钮（clickBtn）后，通过async函数进行表单验证，确保数据完整后生成图文详情功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item prop="limitDays" style="margin-left: 5px;">
  <el-input v-model="ruleForm.limitDays" placeholder="天数" style="width: 100px;" />
</el-form-item>
<el-form-item prop="limitCount">
  <el-input v-model="ruleForm.limitCount" placeholder="个数" style="width: 100px;" />
</el-form-item>

<el-button type="primary" link @click="clickBtn(ruleFormRef)">生成图文详情</el-button>

const clickBtn = async (formEl: FormInstance | undefined ) => {
  if (!formEl) return
  await formEl.validateField(['limitDays', 'limitCount'], (flag) => {
      if (flag) {
		console.log('验证')
      }
  })
}