vuejs2 - 使用 vee-validate 验证特定数量的输入字段
问题描述
单击下一步按钮时,我想验证向导中的各种步骤,而不验证所有输入。单击下一步按钮时,它应该触发该功能以验证第一步的输入字段。然后在下一步中输入第二步的输入字段,依此类推。下一个按钮是没有提交按钮。
<tab-content title="Company" icon="fas fa-building" :before-change="validateThirdStep">
<div class="col-md-8 offset-md-2">
<label class="col-form-label text-md-right">Do you have a chicken?</label>
<div class="form-goup row">
<div class="col-md-7">
<input type="radio" name="dsb" id="radios" value="yes" v-model="pickeddsb">Yes
<input type="radio" name="dsb" id="radios" value="no" v-model="pickeddsb">No
</div>
</div>
</div>
<div class="form-group" v-if="pickeddsb=='yes'">
<div class="col-md-8 offset-md-2">
<h4>Data</h4>
</div>
<div class="col-lg-8 m-auto">
<!-- Name -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
<div class="col-md-7">
<input
v-model="namedsb"
v-validate="'required|namedsb'"
:class="{ 'has-error': errors.has('namedsb') }"
type="text"
name="namedsb"
>
{{ errors.first('namedsb') }}
</div>
</div>
<!-- Firm -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('companyname') }}</label>
<div class="col-md-7">
<input
v-model="firm"
v-validate="'required|firmdsb'"
:class="{ 'has-error': errors.has('firmdsb') }"
class="form-control"
type="text"
name="firmdsb"
>
{{ errors.first('firmdsb') }}
</div>
</div>
<!--Telephone-->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{$t('telephone')}}</label>
<div class="col-md-7">
<input
v-model="telephonedsb"
v-validate="'required|telephonedsb'"
:class="{ 'has-error': errors.has('telephonedsb')}"
class="form-control"
type="tel"
name="telephonedsb"
>
{{ errors.first('telephonedsb') }}
</div>
</div>
<!-- Email -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
<div class="col-md-7">
<input
v-model="emaildsb"
v-validate="'required|emaildsb'"
:class="{ 'has-error': errors.has('emaildsb') }"
class="form-control"
type="email"
name="emaildsb"
>
{{ errors.first('emaildsb') }}
</div>
</div>
</div>
</div>
</tab-content>
export default {
data() {
return {
namedsb: "",
telephonedsb: "",
emaildsb: "",
namere: "",
telephonere:"",
emailre: "",
}
},
methods: {
validateThirdStep: function() {
this.$validator.validate('namedsb', this.namedsb);
this.$validator.validate('firmdsb', this.firmdsb);
this.$validator.validate('telephonedsb', this.state);
this.$validator.validate('emaildsb', this.emaildsb);
}
}
}
解决方案
使用 VeeValidate 的内置范围相当容易,您可以在此页面上阅读它:在此处输入链接描述
一个简单的解释是为每个选项卡/步骤添加一个特定的范围,方法是在字段上添加:
data-vv-scope="step1"
然后在按下按钮进行验证时使用此方法:
methods: {
validateForm(scope) {
this.$validator.validateAll('step1').then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}
推荐阅读
- c - 头文件中的“#error”语句不起作用
- python - 我想检查类别页面中的产品是否存在于购物车中,然后使用 django 和 jinja 在网页中显示添加的图标
- javascript - React Semantic UI 无法在 Modal 中提交表单
- reactjs - npm 更新失败,并且在运行 create-react-app 后,一些文件(例如 public、App.js index.js 等)没有安装
- scala - 为什么 T 是扩展类型指示符 C.this.type#T 中 this.type 的类型投影
- reactjs - 在 ReactJs 组件中处理状态的最佳实践是什么
- r - 使用另一个时间序列的增长率插值时间序列(替换 NA)
- perl - sed/awk 有条件地从文件的开头和结尾删除行
- javascript - 无法获取 Angular 材质自动完成值
- reactjs - 如何在jsx反应中访问数组中的数组第一个元素?