elementUI-form表单验证信息

 第一次表单效验没通过的提示信息,在第二次打开弹窗的时候还是存在的,那么就可以用form表单的clearValidate(‘要清除的表单效验信息的字段名’)方法

 

<el-form ref="form">

</el-form>
let form = ref()

form.value.clearValidate('name')

 注意点:


<el-button  @click="xxx" >添加</el-button>

<el-dialog v-model='show'>
    <el-form ref="form">

    </el-form>
</el-dialog>

let form = ref()
let show - ref(false)

function xxx(){
    show.value = true
   // 在打开弹窗的时候form表单还没渲染出来,那么直接调用form表单的方法就会报错,要使用nextTick方法
    nextTick(() => {
       form.value.clearValidate('name')
    }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ElementUIform 表单提交可以使用原生 HTML 的 form 标签,并在其中使用 ElementUI 提供的 el-formel-form-item 组件来创建表单。 在 el-form 中可以使用 ref 属性来绑定表单数据,并使用 :model 属性来绑定表单元素的 v-model。 在 el-form-item 中可以使用 prop 属性来绑定表单元素的 name 属性,并使用 :rules 属性来绑定表单验证规则。 最后使用 el-form 的 submit() 方法来提交表单,并在表单中添加 @submit 事件处理程序来实现提交后的逻辑。 示例代码: ``` <el-form ref="form" :model="formData" @submit.native.prevent="submitForm"> <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"> <el-input v-model="formData.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` ``` <script> export default { data() { return { formData: { username: '', password: '' } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { console.log(this.formData) // 提交表单 } else { console.log('error submit!!') return false } }) } } } </script> ``` 需要注意的是,在使用 el-formElementUI 中的 form 表单提交可以使用 `v-on:submit` 监听表单提交事件,并在监听函数中进行数据的提交操作。另外,ElementUI 也提供了 `el-form` 组件的 `ref` 属性,可以通过该属性获取到表单实例,并调用实例的 `validate` 方法进行表单验证。 例如: ```html <el-form ref="form" @submit.native.prevent="submitForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` ```javascript export default { data() { return { form: { username: '', password: '' } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 提交表单数据 } else { console.log('error submit!!'); return false; } }); } } } ``` 这样就可以在 submitForm 中获取到表单数据并进行提交了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值