element-ui 表单验证提示 is not a string

Question

由于需要验证数字，我在rules中加入type为number，然后输入数字时提示 is not a number

好吧，我用正则判断，去掉type：number 验证成功，代码执行通过

后来， 由于后端返回的为数字，验证又提示 is not a string

提问，如何能让他不去验证格式呢。

<el-form-item label="价格" prop="price"> <el-input v-model="form.price" ></el-input> </el-form-item>
<el-form-item label="克重" prop="weight" > <el-input v-model="form.weight"  type="number"></el-input> </el-form-item>
<el-form-item label="汇率" prop="rate"> <el-input v-model="form.rate"  type="number"></el-input> </el-form-item>

  rules: {

                    name: [
                        { required: true, message: '请填写名称', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请填写价格', trigger: 'blur' }
                    ],
                    weight: [
                        { required: true,  message: '请填写克重', trigger: 'blur' },
                        {validator(r,v,b){console.log(v);(/^[\d]*$/).test(v)?b():b(new Error('请填写数字'))}}
                    ],
                    rate: [
                        { required: true,  message: '请填写数字汇率',  trigger: 'blur'},
                        {validator(r,v,b){(/^[\d]*$/).test(v)?b():b(new Error('请填写数字'))}}
                    ]
                }

Answer 1

我也研究了半天。。原因出在trigger: 'blur'，一张图说明：

Answer 2

首先需要将 Input 的值类型强制转为 number

<el-form-item label="克重" prop="weight" > 
    <el-input v-model.number="form.weight" type="number"></el-input> 
</el-form-item>

然后，服务器返回的值做一下强制数值转换，假设服务器返回回来的数值为 res.param.weight

this.form.weight = res.param.weight * 1

最后，将表单验证规则设置为数值类型

weight: [
    {type: 'number', required: true,  message: '请填写克重', trigger: 'blur' }
],

Answer 3

weight: [
{ type: 'number', required: true, message: '请填写克重', trigger: 'blur' }
]

Answer 4

 <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
  </el-form-item>

数据自动转换为数字格式 没看完文档

Answer 5

vue element-ui使用自定义正则表达式：

let validatePass = (rule, value, callback) => {
     let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
     if (value === '') {
        callback(new Error('请输入密码'))
     } else if (regExp.test(value) === false) {
       callback(new Error('8-16字母和数字组成，不能是纯数字或纯英文'))
     } else {
        if (this.ruleForm.repass !== '') {
          this.$refs.ruleForm.validateField('repass')
        }
          callback()
     }
}

全套完整代码：[vuejs+element ui+ssm+maven实现登陆注册功能（有完整源码下载）