element ui 打开弹框表单校验问题

        <el-dialog
		  title="编辑"
		  :visible.sync="centerDialogVisible"
		  width="70%"
		  center
		  @close="closeDialog"
		  >
		  <div>
		  	<el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="145px" class=" demo-form-inline" :inline='true' >
  			<el-form-item label="是否在岗" prop="isOrganization" required>
		  				<el-radio-group v-model="ruleForm2.isOrganization" style="width: 260px;" >
		  				      <el-radio :label="0">在岗</el-radio>
		  				      <el-radio :label="1">不在岗</el-radio>
		  				</el-radio-group>
		  			</el-form-item>
                </el-form>
            </el-dialog>
	    methods: {
	    	closeDialog(){
	    		this.$refs.ruleForm2.resetFields()
	    	},
          }

主要原因是上次关闭弹框时未初始化表单未清除验证;故所在关闭弹框的时候resetFields一下

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Element UI进行表单校验,可以按照以下步骤操作: 1. 在el-form元素上添加校验规则字段rules,并将其绑定到一个对象上。例如,在data中定义一个名为rules的对象,并将其绑定到el-form上::rules="rules"。 2. 在script标签中定义rules对象,并在该对象中添加要校验的字段及其校验规则。每个字段的校验规则是一个数组,包含一个或多个校验规则对象。例如,要校验用户名字段,可以使用以下格式进行配置: ``` rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ] } ``` 这个例子中的校验规则要求用户名字段不能为空,且在表单失去焦点时触发校验。你可以根据需求自定义校验规则。 3. 在el-form-item元素内部的el-input组件上添加需要校验的字段名。例如,要校验用户名字段,可以在el-input上添加prop属性并将其值设置为"username"。 4. 如果还需要在提交表单进行整体校验,可以使用el-form组件的validate方法。在点击提交按钮或其他触发表单提交的事件时,调用validate方法即可。例如,可以在按钮的点击事件中添加以下代码: ``` this.$refs.form.validate((valid) => { if (valid) { // 表单校验成功,执行提交操作 } else { // 表单校验失败,给出相应提示 } }); ``` 这个例子中的代码会对整个表单进行校验,并在校验完成后的回调函数中判断校验结果。如果valid为true,则表示校验通过;如果valid为false,则表示校验不通过。 以上是在Element UI进行表单校验的基本步骤。你可以根据实际需求自定义校验规则,并根据校验结果进行相应的处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值