请教一下iview表单rules的使用

Question

代码

<Form ref="formInline" :model="formInline" :rules="ruleInline">
    <Input v-model="formInline.user"> </Input>
</Form>

export default {
  data () {
    return {
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { type: 'number', message: '手机号必须是数字', trigger: 'blur' },
          { length: 11, message: '长度必须是11', trigger: 'blur' },
        ]
      }
    }
  }
}

实际图片

1.我想让上面的验证器生效，可是好像被判断成string类型了，而不是number

2.参考了 async-validator 的文档，如果用下面这种方式，该如何写呢？

https://github.com/yiminghe/a...

  {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
      return errors;
    }}

Answer 1

Input 默认本来返回的就是string 你个Input加一个type 设置成number或者tel试试

Answer 2

第一：你没有用formitem包裹input，prop指向校验字段
第二：你这个校验规则很宽泛

看我代码，合适给洒家一个采纳哦
`

<Form ref="formInline" :model="formInline" :rules="ruleInline">
    <FormItem :prop="phone">
        <Input v-model="formInline.user"> </Input>
    </FormItem>
</Form>

//在组件的data里 声明验证规则：

const validatePhone = (rule, value, callback) => {

if (!value) {
    return callback(new Error('手机号不能为空'));
} else if (!/^1[34578]\d{9}$/.test(value)) {
    callback('手机号格式不正确');
} else {
    callback();
}   

};

//在表单验证规则里使用
ruleValidate:{

phone:[{validator:validatePhone,trigger:'blur'}]

}

//注意：表单添加校验时，需要给 Form 设置属性 rules，即 “:rules="ruleValidate"”，
同时给需要验证的 FormItem 设置属性 prop 指向对应字段,即 “:prop="phone"”。
`