然后提交的时候,因为el-form是循环的,所以用ref绑定的fForm是一个数组,要循环校验 fForm.value.forEach((item:any) =>{ item.validate((vali:boolean) =>{if(vali){// 校验通过} }) }) 这样就能对数据进行校验了,校验过了trueNum+1,最后跟fForm的长度作比较,小于的话就是有没通过校验的,等于就说明校...
<el-input v-model="item.comment" placeholder="请输入字段注释"> </el-input> </el-form-item> </div> </el-form> <script>exportdefault{ data() {return{//表单数据form: {//表单字段列表fieldList: [{ id: 1, field: '字段1', comment: '注释1' }], },//校验规则rules: { field_name...
在el-form中,每个表单项都可以通过设置rules属性来定义校验规则,该属性是一个数组,每个元素表示一个校验规则。 二、常见的校验规则 1. 必填项校验:通过设置required属性为true,可以实现必填项校验。当用户未填写必填项时,el-form会自动显示错误提示信息。 2. 字符长度校验:通过设置minlength和maxlength属性,可以对字符...
我们通过在el-form-item标签中的prop属性来指定验证规则的名称为"array"。然后,在rules中以数组的形式定义了验证规则。这个规则中使用了自定义的验证函数validateArray来验证数组是否为空。 在方法validateArray中,我们通过判断value是否是一个数组并且长度大于0来验证数组是否为空。如果不满足条件,则会通过callback(new...
value="item.value"v-for="item in modelList":key="item.value"></el-option></el-select><divstyle="position:absolute;right:-58px;top:0;width:50px;"><i class="control el-icon-circle-plus-outline" @click="addComFn"></i><i v-show="ruleForm.zjList.length > 1" class="control el...
</el-form> ``` 2.在el-form中定义校验规则formRules,对数组属性进行校验。 ```js data() { return { formData: { //表单其他字段 }, formRules: { //其他字段的校验规则 dataList: [ { type: 'array', required: true, message: '请至少添加一条数据', trigger: 'blur' }, //其他校验规则 ...
submitForm (formName) { this.$refs[formName].validate((valid) => { if (!valid) return console.log('未通过校验') }) }, addItem () { this.form.activities.push({ name: '', content: '' }) }, removeItem (index) { this.form.activities.splice(index, 1) ...
在使用el-form时,我们通常需要对表单中的输入进行校验,以确保输入的数据符合我们的要求。ElementUI为el-form提供了丰富的校验规则参数,让我们可以轻松地对表单进行校验。接下来,我们就来详细地了解一下这些校验规则参数。 我们需要在el-form的表单项中设置rules属性,这个属性是一个数组,里面包含了每个表单项的校验规则...
除了一些简单的表单验证之外,我们还会有一些稍微复杂点的多层级表单的验证,如下图所示可点击添加,删除对数组进行操作,当点击确定时需要验证每一条form-item不能为空 其tempalte部分主要代码如下所示: <el-form:model="form"ref="cardForm":rules="rules"label-position="top"><el-form-itemv-for="(item, ind...