el-form 新增校验后，并重置

最新推荐文章于 2024-03-04 20:38:14 发布

坞爽

最新推荐文章于 2024-03-04 20:38:14 发布

阅读量402

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40671274/article/details/130060247

版权

 <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="150px" class="edit-ruleForm">
        <el-form-item label="电话：" prop="mobile" wid>
          <el-input v-model="ruleForm.mobile" placeholder="请输入您的电话号码" maxlength="15" />
        </el-form-item>
        <el-form-item label="公司名称：" prop="entityName">
          <el-input v-model="ruleForm.entityName" placeholder="请输入您的公司名称" maxlength="30" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitPass(ruleForm)">确 定</el-button>
      </span>

data() {
    return { 
      ruleForm: {
        mobile: '',
        entityName: '',
        serviceId: this.$route.query.serviceId
      },
      rules: {
        mobile: [
          { required: true, message: '请输入您的电话号码', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        entityName: [
          { required: true, message: '请输入您的公司名称', trigger: 'blur' }
        ]
      }
   }
}

 submitPass(ruleForm) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          consultingService(ruleForm).then(res => {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.$refs.ruleForm.resetFields()
            this.Dialog = false
          })
        } else {
          return false
        }
      })
    }

this.$refs.ruleForm.resetFields()

resetFields 重置form表单内容，将所有字段值重置为初始值并移除校验结果