el-form用自带rules校验输入为number类型

步骤:
一、v-model加number后缀

              <el-form-item label="port" prop="thingsboard.port">
                <el-input
                  v-model.number="basicCfgData.port"
                  placeholder="请输入"
                ></el-input>
                <span class="helpTip">端口</span>
              </el-form-item>

二、rules种加type:'number’限制

              port: [
                { type:'number',required: true, trigger: "blur", message: "端口为数字类型" },
              ],

注意,上面两种要同时使用,只写.number,任何类型都能输入。只在rules里写number,任何输入都校验不通过。两者结合使用时,发现对数字类型校验通过

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-formrules可以用来进行表单校验,包括非空校验。下面是一个示例,演示了如何在el-form中使用rules进行非空校验: ```html <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input-number v-model="form.age"></el-input-number> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', age: null }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过,可以进行提交操作 // ... } else { // 表单校验不通过,需要处理错误信息 return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; </script> ``` 在上面的示例中,我们定义了一个包含name和age字段的表单。对于name字段,我们使用了非空校验规则,当输入框失去焦点时会进行校验。对于age字段,同样使用了非空校验规则。在提交表单时,我们调用`validate`方法进行校验,如果通过校验,则可以进行提交操作;如果校验不通过,则需要处理错误信息。 需要注意的是,el-formrules是一个对象,对象的属性名对应表单字段名,属性值是一个数组,包含了校验规则。每个校验规则是一个对象,可以包含多个属性,例如`required`表示是否必填,`message`表示错误提示信息,`trigger`表示触发校验的方式(这里使用了blur,即失去焦点时触发校验)。 希望以上内容能对你有所帮助!如果还有其他问题,请继续提问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值