【Vue】iview中动态表单验证，:rules如何验证input输入数字问题？

Z时代
2024-01-10
分类：技术分享

如题，如何动态验证input输入数字问题？

`<Form-item :label="item.name" :prop="'items.' + index+ '.tagsubmitvalue'" :key="item.id" v-if="item.tagtype == 1 && item.isnumber == 1" :rules="{type: 'number',required:true,pattern:/^[a-z0-9]+$/,message:'请输入数字',trigger:'change'}"><Input v-model="item.tagsubmitvalue" placeholder="请输入数字" number></Input></Form-item>`

回答

我来补充一下，也是看的async-validator的校验规则，写法举例如下：

people: [
    { required: true, message: '请输入扫码解锁人数', trigger: 'blur' },
    { type: 'number', message: '请输入数字格式', trigger: 'blur', transform(value) {
        return Number(value);
    }}],

但是要记住，这只是验证数字格式，实际上表单传递的数据格式还是string格式，所以在请求接口的时候仍需要手动去转换Number格式

iview使用的校验库是async-validator，所以，你可以使用async-validator的校验规则来写自定义的校验方法。async-validator的API文档：https://github.com/yiminghe/a...

举个?：

var descriptor = {
  email: [
    {type: "string", required: true, pattern: schema.pattern.email},
    {validator(rule, value, callback, source, options) {
      var errors = [];
      // test if email address already exists in a database
      // and add a validation error to the errors array if it does
      callback(errors);
    }}
  ]}

具体iview中校验的过程，可以参考iview中form-item组件的源码查看：
https://github.com/iview/ivie...

iview 不是有组件Input-number吗 ? 这个就只允许输数字,如果用input验证的话参考楼上的吧

之前我也做过验证，1楼的只有在输入第一个的时候会管用，比如说输入1*2就不会提示。所以我就没有用这种方式，是自己写的验证方法

表单验证
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item

label="年龄"
prop="age"
:rules="[
  { required: true, message: '年龄不能为空'},
  {validator(rule, value, callback, source, options) {
  var errors = [];
  if (!/^[a-z0-9]+$/.test(value)) {
          callback('年龄必须为数字值....');
      } 
        callback(errors);
 }}]"

<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>