el-form的表单验证 rules 必填 且为纯数字

注意:当rules中设置了 number 时, 对应的 v-model 设置为 v-model.number

   <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
     <el-form-item label="版本号" prop="versionCode" :label-width="formLabelWidth">
          <el-input v-model.number="ruleForm.versionCode" placeholder="输入版本号"></el-input>
        </el-form-item>
   </el-form>
   
 data(){
  return {
     rules:{
         versionCode: [
          {required: true, message: "输入版本号", trigger: "blur" },
          { required: true, type:"number",message: "版本号为数字", trigger: "blur" },
        ],
      }
   }
}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form-item的提示必填功能可以通过设置label的名称和校验规则来实现。在代码中,可以通过设置label的名字为"下发周期",并且设置必填校验规则,即可实现提示必填的功能。示例代码如下: ``` <el-form-item label="下发周期" prop="cycle" rules="required"> <el-select v-model="cycleType" placeholder="请选择周期类型"> <el-option label="每天" value="day"></el-option> <el-option label="每周" value="week"></el-option> <el-option label="每月" value="month"></el-option> </el-select> </el-form-item> ``` 在上述代码中,我们使用了element-ui的el-form-item组件,并设置了label为"下发周期",同时给prop设置为"cycle",这样可以和表单数据进行双向绑定。通过设置rules为"required",即可实现必填校验规则,如果用户没有选择周期类型,会提示"请填写任务周期"。这样就实现了el-form-item的提示必填功能。 如果需要在一个el-form-item中包含多个选择框或输入框,并且实现多个必填的功能,可以参考以下示例代码: ``` <el-form-item label="多个必填项" prop="multiple"> <el-row> <el-col :span="12"> <el-form-item label="选项1" prop="option1" rules="required"> <el-input v-model="option1Value" placeholder="请输入选项1"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="选项2" prop="option2" rules="required"> <el-input v-model="option2Value" placeholder="请输入选项2"></el-input> </el-form-item> </el-col> </el-row> </el-form-item> ``` 在上述代码中,我们在一个el-form-item内部嵌套了两个el-form-item,分别用于包含选项1和选项2。同样地,我们给这两个内部的el-form-item设置了必填校验规则,这样即可实现多个必填项的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [单个el-form-item中有多个必填](https://blog.csdn.net/weixin_43691818/article/details/121428871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值