VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。

效果图：
使用Element-UI的自定义验证实现。
这里面有个坑是，两个input输入框都点出了提示信息，填写任一输入框之后只有操作的那一项的验证提示消失了，不主动清除另一项的验证提示就会一直存在，观感很不好。如图：

所以，在验证成功后要强制清除另一方的验证提示。本来应该分别清除的，我这里懒得写那么长了干脆一起清掉哈哈哈。
PS：本来应该用this.$nextTick(() =>{}在更新数据后立即调用的，但是不知道为啥我这用这个反而说没有clearValidate（）这个方法。虽然没用上，但是下面的代码段还是保留了，看到这篇文章的UU都可以试试。
现在，填入其中一项效果如图：

HTML：

         <el-formref="form"class="forminfo":model="form"label-width="20%":rules="rules"><el-form-itemref="zhname"label="客户中文名称"prop="product_name_zh"><el-inputv-model="form.product_name_zh"style="width: 250px"placeholder="中文名称和英文名称至少填写一项"/></el-form-item><el-form-itemref="enname"label="客户英文名称"prop="product_name_en"><el-inputv-model="form.product_name_en"style="width: 250px"placeholder="中文名称和英文名称至少填写一项"/></el-form-item></el-form>

JS：

export default {data() {var validateName = (rule, value, callback) => {if (!this.form.product_name_zh && !this.form.product_name_en) {callback(new Error("请至少填写一项"))} else {//任意值被填写，清除验证提示if (!this.form.product_name_zh || !this.form.product_name_en) {// this.$nextTick(() => {//   this.$refs.zhname.clearValidate()// })this.$refs.zhname.clearValidate()this.$refs.enname.clearValidate()}callback()}}return {rules: {product_name_zh: [{required: true,validator: validateName,trigger: "change",},],product_name_en: [{required: true,validator: validateName,trigger: "change",},],},}},

VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。相关推荐

ExtJS4为form表单必填项添加红色*标识
通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...
如何设置dedecms自定义表单必填项？
用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户.那我们要如何设置织梦cms自定义表单必填项呢? ...
div.php织梦自定义表判断不能为空,织梦自定义表单字段为必填项的教程
织梦自定义表单用的最多的就是制作留言板,报名等功能,但是添加的字段不填写就能提交,容易被恶意提交,为了防止这些,我们可以把这些字段选项设定为必填项. 方法如下: 1. 用php验证在plus/diy ...
vue 上传附件设置必填项
在提交表单的时候动态移除, this.$refs.image.clearValidate(); this.rules.imageUrl = [] 如果上传成功就把必填项动态移除,
html5 表单必填项,javascript - HTML5表单必填属性。设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
vue表单必填项的星号设置为红色
class="demo-ruleForm" 设置class 为demo-ruleForm 如果去掉demo ,则为灰色
elementui 表单v-molde是动态的，校验表单字段为必填项
 <el-button type="primary" @click="Setup('setup1')">按钮一&l ...
jquery根据value值php,表单php传值后jquery清除表单某项value问题
表单 php文件我现在写了一个jquery打算每次提交后清除姓名中的内容代码如下 $(function() { $(':input','#recordform') .not(':button, :s ...
解决Django文件表单验证forms.FileField(required=True)，总是无法通过验证：这个字段是必填项
解决方法如果在实例化form时是如下代码: save_file_form = SaveFileForm(request.POST) 则需要改为: save_file_form = SaveFileF ...

VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。

VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。相关推荐

最新文章

热门文章