清除from表单验证，from 表单验证

原创已于 2022-03-18 10:49:30 修改 · 609 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-03-18 10:25:52 首次发布

这篇博客详细介绍了在Vue.js中如何进行表单验证和数据提交。通过`el-form`组件结合`model`和`rules`属性实现表单绑定，并使用`resetFields`方法清除表单数据。点击按钮触发`UpdateMall`方法，调用`validate`对表单进行校验，确保数据有效后再执行更新操作。

export function Clear(_this){
    if(_this.$refs["form"]!=undefined){
        _this.$refs["form"].resetFields()
     }
}

验证表单绑定formMall

        <el-form :model="formMall"  :rules="rulesMall" ref="formMall">
          <el-form-item
            label="道具名称"
            :label-width="formLabelWidth"
            required
          >
          <el-input v-model="formMall.propName" autocomplete="off" clearable disabled></el-input>
          </el-form-item>
  </el-form>

 <el-button type="primary" @click="UpdateMall('formMall')">确 定</el-button>


UpdateMall(form) {
      this.$refs[form].validate((valid) => {
          if (valid) {
               //去执行的事件
          } else {

            return false;
          }
        });
 },