# 数据类型验证

# Boolean

<template>
  <form @submit.prevent="handleSubmit">
    <button type="button" @click="toggle">Toggle input type</button>
    <label>
      绑定值
      <input v-model="form.bind" :type="type" />
    </label>
    <button>Submit</button>
  </form>
</template>
<script>
export default {
  data () {
    return {
      type: 'input',
      form: {
        bind: ''
      },
      rules: [
        ['boolean', 'bind']
      ],
      labels: {
        bind: '绑定值'
      }
    }
  },
  methods: {
    toggle () {
      this.type = this.type === 'input' ? 'checkbox' : 'input'
      // 单纯的切换type还不行，得手动重新赋值一下对应的类型
      this.form.bind = this.type === 'input' ? '' : false
    },
    handleSubmit () {
      this.validate(this.form, this.rules, this.labels)
    }
  }
}
</script>

# 参数

参数	类型	描述	默认值
message	String	当类型不是 Boolean 时候的错误提示	'{attribute}必须是布尔型'

# Number

<template>
  <form @submit.prevent="handleSubmit">
    <button type="button" @click="toggle">Toggle input type</button>
    <label>
      绑定值
      <input v-if="type === 'input'" v-model="form.bind" />
      <input v-else type="number" v-model.number="form.bind" />
    </label>
    <button>Submit</button>
  </form>
</template>
<script>
export default {
  data () {
    return {
      type: 'input',
      form: {
        bind: ''
      },
      rules: [
        ['number', 'bind', {
          min: 3,
          max: 10
        }]
      ],
      labels: {
        bind: '绑定值'
      }
    }
  },
  methods: {
    toggle () {
      this.type = this.type === 'input' ? 'number' : 'input'
      // 单纯的切换type还不行，得手动重新赋值一下对应的类型
      this.form.bind = this.type === 'input' ? '' : 0
    },
    handleSubmit () {
      this.validate(this.form, this.rules, this.labels)
    }
  }
}
</script>

# 参数

参数	类型	描述	默认值
message	String	当类型不是 Number 时候的错误提示	'{attribute}必须是数字'
min	Number	允许的数字最小值	-Infinity
message_min	String	长度小于 min 时的错误提示	'{attribute}不能小于{min}'
max	Number	允许的数字最大值	Infinity
message_max	String	长度大于 max 时的错误提示	'{attribute}不能大于{max}'

# String

<template>
  <form @submit.prevent="handleSubmit">
    <button type="button" @click="toggle">Toggle input type</button>
    <label>
      绑定值
      <input v-if="type === 'input'" v-model="form.bind" />
      <input v-else type="number" v-model.number="form.bind" />
    </label>
    <button>Submit</button>
  </form>
</template>
<script>
export default {
  data () {
    return {
      type: 'number',
      form: {
        bind: 0
      },
      rules: [
        ['string', 'bind', {
          min: 3,
          max: 10
        }]
      ],
      labels: {
        bind: '绑定值'
      }
    }
  },
  methods: {
    toggle () {
      this.type = this.type === 'input' ? 'number' : 'input'
      // 单纯的切换type还不行，得手动重新赋值一下对应的类型
      this.form.bind = this.type === 'input' ? '' : 0
    },
    handleSubmit () {
      this.validate(this.form, this.rules, this.labels)
    }
  }
}
</script>

# 参数

参数	类型	描述	默认值
message	String	当类型不是 String 时候的错误提示	'{attribute}必须是字符串'
min	Number	允许的字符串最小长度	0
message_min	String	长度小于 min 时的错误提示	'{attribute}长度至少为{min}'
max	Number	允许的字符串最大长度	Infinity
message_max	String	长度大于 max 时的错误提示	'{attribute}长度不能超过{max}'

# Array

<template>
  <form @submit.prevent="handleSubmit">
    <label>
      选择要验证的值：
      <select @change="handleChange">
        <option>'abc'</option>
        <option>[]</option>
        <option>[1]</option>
        <option>[1,2,3]</option>
      </select>
    </label>

    <button>Submit</button>
  </form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        bind: 0
      },
      rules: [
        ['array', 'bind', {
          min: 1,
          max: 2
        }]
      ],
      labels: {
        bind: '绑定值'
      }
    }
  },
  methods: {
    handleChange (e) {
      this.form.bind = JSON.parse(e.target.value)
    },
    handleSubmit () {
      this.validate(this.form, this.rules, this.labels)
    }
  }
}
</script>

# 参数

参数	类型	描述	默认值
message	String	当类型不是 Array 时候的错误提示	'{attribute}必须是数组'
min	Number	允许的数组最小个数	0
message_min	String	个数小于 min 时的错误提示	'{attribute}长度至少为{min}'
max	Number	允许的数组最大个数	Infinity
message_max	String	个数大于 max 时的错误提示	'{attribute}长度不能超过{max}'

# Date

<template>
  <form @submit.prevent="handleSubmit">
    <label>
      绑定值：
      <input type="date" v-model="form.bind" />
    </label>

    <button>Submit</button>
  </form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        bind: ''
      },
      rules: [
        ['date', 'bind']
      ],
      labels: {
        bind: '绑定值'
      }
    }
  },
  methods: {
    handleChange (e) {
      this.form.bind = JSON.parse(e.target.value)
    },
    handleSubmit () {
      this.validate(this.form, this.rules, this.labels)
    }
  }
}
</script>

# 参数

参数	类型	描述	默认值
message	String	当类型不是 Date 时候的错误提示	'{attribute} 必须是时间类型'

← 数字验证正则表达式 →