form表单中关于一条form-item中多个必填项的prop设置

本文介绍在Vue项目中使用iView UI框架进行表单验证的方法,特别是在单个表单项内需验证多个必填字段的情况。通过在<FormItem>内部嵌套另一层<FormItem>,实现对输入链接一栏中包含的小程序appId和链接URL的双重必填验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目的技术支持:Vue+iView
项目要求如下:输入链接一栏中两个输入框都必须填写并验证。

输入链接一栏是由<FormItem>包裹起来的,即Form表单中一条FormItem需要校验两条必填值(或者更多)
在这里插入图片描述
具体解决方法是<FormItem>中再包裹一层<FormItem>

代码如下:

<template>
    <div>
        <Form ref="formValidate" :rules="ruleValidate" :model="formValidate" :label-width="100" label-position="right">
        	<!-- ... 其他表单项 -->
            <FormItem label="输入链接" prop="applets">
                <Select v-model="formValidate.applets" placeholder="请选择" style="width:100px">
                    <Option :value="0">h5链接</Option>
                    <Option :value="1">小程序链接</Option>
                </Select>
                <div class="form-item-box">
                    <FormItem prop="appId">
                        <Input v-model="formValidate.appId" placeholder="请输入小程序appId" style="width:150px"/>
                    </FormItem>
                </div>
                <div class="form-item-box">
                    <FormItem prop="linkUrl">
                        <Input v-model="formValidate.linkUrl" placeholder="请输入跳转的页面地址" style="width:250px" />
                    </FormItem>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
export default {
  data() {
    return {
      formValidate: {
        // ...
        applets: 0,
        appId: '',
        linkUrl: ''
        // ...
      },
      ruleValidate: {
        // ...
        applets: [{ required: true, message: '必须填写!' }],
        appId: [{ required: true, message: '必须填写!' }],
        linkUrl: [{ required: true, message: '必须填写!' }]
        // ...
      }
    }
  }
}
</script>

这种方法不仅适用于iView,ElementUI等也都支持(其他组件暂未验证,理论上也应该支持的)

### Element UI 中 `el-form-item` 的自定义必填校验 在Element UI框架下实现`el-form-item`的自定义必填验证,主要通过配置`:rules`属性来指定特定字段上的验证规则。对于动态添加的表单及其对应的必填校验逻辑,则需结合JavaScript代码完成初始化以及后续更新操作。 当创建新的`el-form-item`实例时,可以通过如下方式为其设定必要的校验条件: ```html <template> <div id="app"> <!-- 动态生成多个表单 --> <el-form ref="dynamicForm" :model="form" label-width="80px"> <el-form-item v-for="(item, index) in form.labels" :key="index" :label="'标签:' + (index + 1)" :prop="'labels.' + index + '.value'" :rules="[ { required: true, message: '此不能为空', trigger: 'blur' } ]" class="middleInput" > <el-input maxlength="100" show-word-limit type="textarea" :rows="3" v-model.trim="item.value" placeholder="请输入内容..." ></el-input> <!-- 移除按钮仅显示于非首个元素上 --> <i class="el-icon-remove-outline icon" v-if="(form.labels.length > 1)" @click.prevent="removeKey(item, index)"> </i> </el-form-item> <!-- 添加新条目的按钮 --> <el-button type="primary" @click="addNewLabel">新增</el-button> <!-- 提交按钮触发整体表单验证 --> <el-button type="success" @click="submitForm('dynamicForm')">提交</el-button> </el-form> </div> </template> ``` 上述模板中的每一组`el-form-item`都关联了一个唯一的路径作为其`:prop`值,这使得即使是在循环渲染的情况下也能精准定位到具体的输入控件并应用相应的验证规则[^1]。 为了确保每次修改选后能够及时清除旧有的错误提示信息,在某些场景下可能还需要监听变化事件,并调用`this.$refs.form.validateField()`方法手动刷新目标域的状态[^2]。 此外,还需注意的是,每当向表单中增加或删除目时,应该同步调整内部数据结构(`form`)的变化,从而保持视图层与模型状态之间的一致性。 #### JavaScript部分处理函数示例: ```javascript export default { data() { return { form: { labels: [ // 初始化至少包含一 { value: '' }, ], }, }; }, methods: { addNewLabel() { this.form.labels.push({ value: '' }); }, removeKey(_, index) { if (this.form.labels.length > 1) { this.form.labels.splice(index, 1); } }, submitForm(formName) { const self = this; this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('存在未满足的验证条件.'); return false; } }); }, }, }; ``` 此段脚本展示了如何管理表单的数据源、响应用户的交互行为(如点击“移除”图标),同时也包含了用于触发表单级联验证的操作流程。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值