```html
<div class="demo-block" id="x-input-demo1">
  <lx-group title="禁用内置验证及显示成功或者错误样式">
    <lx-x-input
      title="禁用验证"
      placeholder="I'm placeholder"
      novalidate
      :icon-type="iconType"
      :show-clear="false"
      @on-blur="onBlur"
    />
  </lx-group>
  <br>
  <lx-x-button @click.native="iconType = 'success'">
    set success
  </lx-x-button>
  <lx-x-button @click.native="iconType = 'error'">
    set error
  </lx-x-button>
  <lx-x-button @click.native="iconType = ''">
    set empty
  </lx-x-button>

  <lx-group title="is-type传入function">
    <lx-x-input
      title="必须输入23333333333333333333333333"
      :is-type="be2333"
      placeholder="I'm placeholder"
    />
  </lx-group>

  <lx-group title="使用icon代替title">
    <lx-x-input
      title="必须输入2333"
      :is-type="be2333"
      placeholder="I'm placeholder"
    >
      <img
        slot="label"
        style="padding-right:10px;display:block;"
        src="http://dn-placeholder.qbox.me/110x110/FF2D55/000"
        width="24"
        height="24"
      >
    </lx-x-input>
  </lx-group>

  <lx-group title="max is alias to maxlength">
    <lx-x-input
      v-model="maxValue"
      title="max=5"
      :max="5"
      @on-change="change"
    />
  </lx-group>

  <lx-group title="debounce = 1000">
    <lx-x-input
      v-model="debounceValue"
      title="debounce"
      :debounce="500"
      @on-change="change"
    />
  </lx-group>

  <lx-group title="disabled">
    <lx-x-input
      v-model="disabledValue"
      title="value"
      disabled
      is-link
    />
  </lx-group>

  <lx-group title="set type = tel">
    <lx-x-input
      title="value"
      type="tel"
    />
  </lx-group>

  <lx-group title="html title">
    <lx-x-input
      :title="`<span style=&quot;${style}&quot;>hello</span>`"
      placeholder="I'm placeholder"
    />
  </lx-group>
  <lx-x-button @click.native="style = 'color:red;'">
    set red
  </lx-x-button>
  <lx-x-button @click.native="style = 'color:green'">
    set green
  </lx-x-button>
  <lx-x-button @click.native="style = 'color:#000'">
    set default
  </lx-x-button>

  <lx-group title="Default">
    <lx-x-input
      title="message"
      placeholder="I'm placeholder"
    />
  </lx-group>

  <lx-group title="不显示清除按钮">
    <lx-x-input
      title="message"
      required
      placeholder="I'm placeholder"
      :show-clear="false"
      autocapitalize="characters"
    />
  </lx-group>

  <lx-group title="focus事件">
    <lx-x-input
      title="focus-handler"
      placeholder="focus me!"
      :show-clear="true"
      @on-focus="onFocus"
    />
  </lx-group>

  <lx-group title="set is-type=china-name">
    <lx-x-input
      title="姓名"
      name="username"
      placeholder="请输入姓名"
      is-type="china-name"
    />
  </lx-group>

  <lx-group title="set keyboard=number and is-type=china-mobile">
    <lx-x-input
      title="手机号码"
      name="mobile"
      placeholder="请输入手机号码"
      keyboard="number"
      is-type="china-mobile"
    />
  </lx-group>

  <lx-group title="set is-type=email">
    <lx-x-input
      title="邮箱"
      name="email"
      placeholder="请输入邮箱地址"
      is-type="email"
    />
  </lx-group>

  <lx-group title="set min=2 and max=5">
    <lx-x-input
      title="2-5个字符"
      placeholder=""
      :min="2"
      :max="5"
    />
  </lx-group>

  <lx-group title="确认输入">
    <lx-x-input
      v-model="password"
      title="请输入6位数字"
      type="text"
      placeholder=""
      :min="6"
      :max="6"
      @on-change="change"
    />
    <lx-x-input
      v-model="password2"
      title="请确认6位数字"
      type="text"
      placeholder=""
      :equal-with="password"
    />
  </lx-group>

  <lx-group
    title="验证码"
    class="weui_cells_form"
  >
    <lx-x-input
      title="验证码"
      class="weui_cell_vcode"
    >
      <img
        slot="right"
        class="weui_vcode-img"
        src="http://weui.github.io/weui/images/vcode.jpg"
      >
    </lx-x-input>
    <lx-x-input
      title="发送验证码"
      class="weui_vcode"
    >
      <lx-x-button
        slot="right"
        type="primary"
        mini
      >
        发送验证码
      </lx-x-button>
    </lx-x-input>
  </lx-group>

  <lx-group title="check if value is valid when required===true">
    <lx-x-input
      ref="input01"
      title="message"
      placeholder="I'm placeholder"
      required
    />
    <lx-cell
      title="click to get valid value"
      :value="'$valid value:' + valid1"
      @click.native="getValid1"
    />
  </lx-group>

  <lx-group title="check if value is valid when required===false">
    <lx-x-input
      ref="input02"
      title="message"
      placeholder="I'm placeholder"
      :required="false"
      @click.native="getValid2"
    />
    <lx-cell
      title="click to get valid value"
      :value="'$valid value:' + valid2"
      @click.native="getValid2"
    />
  </lx-group>
</div>


<script>
// XInput.md
new Vue({
  el: '#x-input-demo1',
  
  data: {
    password: '123465',
    password2: '',
    valid1: false,
    valid2: false,
    iconType: '',
    be2333: function (value) {
      return {
        valid: value === '2333',
        msg: 'Must be 2333'
      }
    },
    style: '',
    disabledValue: 'hello',
    debounceValue: '',
    maxValue: ''
  },
  methods: {
    getValid1 () {
      this.valid1 = this.$refs.input01.valid
    },
    getValid2 () {
      this.valid2 = this.$refs.input02.valid
    },
    change (val) {
      console.log(val)
    },
    onBlur (val) {
      console.log('on blur', val)
    },
    onFocus (val) {
      console.log('on focus', val)
    }
  }
})
</script>
<style>
.red {
  color: red;
}
.green {
  color: green;
}
</style>
```