Element: [Bug Report] Add a trigger to the first rule, the rule will not pass for both valid value and invalid value

[yubaoquan]

Element UI version

1.4.6

OS/Browsers version

MacOS Sierra 10.12.6 chrome 61

Vue version

2.5.2

Reproduction Link

https://jsfiddle.net/0omh3aca/1/

Steps to reproduce

1. Create a form with an input which has two rules one is 'required' another is type to number, as below:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="age" prop="age" :rules="[
      { required: true, message: 'age is required', trigger: 'blur'},
      { type: 'number', message: 'age must be a number'}
    ]">
    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
    <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
  </el-form-item>
</el-form>
</div>
var Main = {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

1. input a valid value, for example 10
2. click other place to blur the input

What is Expected?

No error msg is shown.

What is actually happening?

The error msg of first rule is shown: 'age is required'.

Anyway, this is very weird.

[Leopoldthecoder]

Actually in async-validator, type is always tested against the value even if you don't declare it explicitly. Besides, type defaults to 'string', so a number will always fail it.

To avoid this behavior, you may need to add a pattern to the first rule: https://jsfiddle.net/0omh3aca/2/