diff --git a/packages/opendesign/src/hooks/use-composition.ts b/packages/opendesign/src/hooks/use-composition.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6240c957b70da4bd702de8fe61546746c4a77997
--- /dev/null
+++ b/packages/opendesign/src/hooks/use-composition.ts
@@ -0,0 +1,42 @@
+import { Ref, onMounted, onUnmounted, ref } from 'vue';
+import { trigger } from '../_utils/event';
+
+export function useComposition({ el }: { el?: Ref<HTMLElement | null> } = {}) {
+  const isComposing = ref(false);
+
+  // 开始中文输入
+  const onCompositionStart = () => {
+    isComposing.value = true;
+  };
+  // 结束中文输入
+  const onCompositionEnd = (e: Event) => {
+    if (!isComposing.value) {
+      return;
+    }
+
+    isComposing.value = false;
+    trigger(e.target as HTMLElement, 'input');
+  };
+
+  onMounted(() => {
+    if (!el?.value) {
+      return;
+    }
+    el.value.addEventListener('compositionstart', onCompositionStart);
+    el.value.addEventListener('compositionend', onCompositionEnd);
+  });
+
+  onUnmounted(() => {
+    if (!el?.value) {
+      return;
+    }
+    el.value.removeEventListener('compositionstart', onCompositionStart);
+    el.value.removeEventListener('compositionend', onCompositionEnd);
+  });
+
+  return {
+    isComposing,
+    onCompositionStart,
+    onCompositionEnd,
+  };
+}
diff --git a/packages/opendesign/src/input-number/OInputNumber.vue b/packages/opendesign/src/input-number/OInputNumber.vue
index 0ca01431b5bab1d8c77d593d907d8a61794578f8..46a66c05f3e6abfedfbc63e4975a2106a962f188 100644
--- a/packages/opendesign/src/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/input-number/OInputNumber.vue
@@ -3,7 +3,7 @@ import { ref, watch, computed } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { IconMinus, IconAdd, IconChevronUp, IconChevronDown } from '../_utils/icons';
 import { OInput } from '../input';
-import { isValidNumber, correctValue, getRealValue } from './input-number';
+import { isValidNumber, correctValue, string2number, number2string } from './input-number';
 import { isFunction, isUndefined } from '../_utils/is';
 import { inputNumberPorps } from './types';
 
@@ -12,7 +12,7 @@ const props = defineProps(inputNumberPorps);
 const emits = defineEmits<{
   (e: 'update:modelValue', value: number): void;
   (e: 'change', value: number): void;
-  (e: 'input', value: string, evt: Event): void;
+  (e: 'input', inputValue: string, value: number, evt: Event): void;
   (e: 'blur', value: number, evt: FocusEvent): void;
   (e: 'focus', value: number, evt: FocusEvent): void;
   (e: 'plus', value: number, evt: MouseEvent): void;
@@ -20,48 +20,50 @@ const emits = defineEmits<{
   (e: 'pressEnter', value: number, evt: Event): void;
 }>();
 
-const currentValue = ref<number | string | undefined>(props.modelValue ?? props.defaultValue);
-const isValid = ref(isValidNumber(currentValue.value, props.min, props.max));
+// 当前数字值
+const defaultVal = ref<number>(props.defaultValue ?? 0);
+// 输入框的值
+const inputValue = ref<string>(number2string(props.modelValue ?? props.defaultValue));
+const currentValue = computed(() => string2number(inputValue.value));
 
-let numberValue = getRealValue(currentValue.value);
-let lastNumberValue = numberValue;
-let lastInputValue = currentValue.value;
+// 记录上一次值
+let lastValue = currentValue.value;
 
 watch(
-  () => props.min,
-  (v) => {
-    isValid.value = isValidNumber(currentValue.value, v, props.max);
+  () => props.modelValue,
+  (val?: number) => {
+    if (currentValue.value !== val) {
+      inputValue.value = number2string(val);
+    }
   }
 );
 
-watch(
-  () => props.max,
-  (v) => {
-    isValid.value = isValidNumber(currentValue.value, props.min, v);
+const parseFun = (v: string) => {
+  let val = string2number(v);
+  if (props.parse) {
+    val = props.parse(val);
   }
-);
+  return number2string(val);
+};
 
-watch(
-  () => props.modelValue,
-  (val) => {
-    isValid.value = isValidNumber(val, props.min, props.max);
-    if (isFunction(props.format)) {
-      currentValue.value = props.format(val ?? '');
-    } else {
-      currentValue.value = val;
-    }
-    numberValue = getRealValue(currentValue.value);
-    lastNumberValue = numberValue;
-    lastInputValue = currentValue.value;
+const checkValidFun = (value: string) => {
+  const val = string2number(value);
+  let valid = isValidNumber(val, props.min, props.max);
+  if (valid) {
+    valid = isFunction(props.checkValid) ? props.checkValid(val) : true;
   }
-);
+  return valid;
+};
+
+const onInvalidChange = (value: string, last: string) => {
+  return last;
+};
 
 const canAdd = computed(() => {
   if (props.disabled) {
     return false;
   }
-  const n = Number(currentValue.value);
-  if (!isUndefined(props.max) && props.max <= n) {
+  if (!isUndefined(props.max) && props.max <= currentValue.value) {
     return false;
   }
   return true;
@@ -70,104 +72,77 @@ const canMinus = computed(() => {
   if (props.disabled) {
     return false;
   }
-  const n = Number(currentValue.value);
-  if (!isUndefined(props.min) && props.min >= n) {
+  if (!isUndefined(props.min) && props.min >= currentValue.value) {
     return false;
   }
   return true;
 });
 
-const updateValue = (val: string) => {
-  const v = isFunction(props.parse) ? props.parse(val) : val;
+const updateValue = (val: number) => {
+  inputValue.value = number2string(val);
 
-  if (isValid.value) {
-    numberValue = getRealValue(v);
-  } else {
-    // 不合法数据矫正
-    numberValue = correctValue(v, lastNumberValue, props.min, props.max);
-    isValid.value = true;
-  }
-
-  emits('update:modelValue', numberValue);
-
-  if (numberValue !== lastNumberValue) {
-    emits('change', numberValue);
-  }
+  emits('update:modelValue', currentValue.value);
 
-  if (val !== lastInputValue) {
-    if (isFunction(props.format)) {
-      currentValue.value = props.format(numberValue);
-    } else {
-      // 更新输入框显示的值
-      currentValue.value = numberValue;
-    }
+  if (currentValue.value !== lastValue) {
+    emits('change', currentValue.value);
+    lastValue = currentValue.value;
   }
-
-  lastNumberValue = numberValue;
-  lastInputValue = currentValue.value;
-  return numberValue;
+  return currentValue.value;
 };
 
 const onInput = (val: string, evt: Event) => {
-  emits('input', val, evt);
+  inputValue.value = val;
+  emits('input', val, currentValue.value, evt);
 };
 
 const onFocus = (val: string, evt: FocusEvent) => {
-  emits('focus', numberValue, evt);
+  emits('focus', currentValue.value, evt);
 };
 const onBlur = (val: string, evt: FocusEvent) => {
-  const v = updateValue(val);
-  emits('blur', v, evt);
+  emits('blur', currentValue.value, evt);
 };
 const onPressEnter = (val: string, evt: Event): void => {
-  const v = updateValue(val);
-
-  emits('pressEnter', v, evt);
+  emits('pressEnter', currentValue.value, evt);
 };
 
 const onChange = (val: string) => {
-  if (isValid.value) {
-    updateValue(val);
-  }
+  inputValue.value = val;
+  emits('change', currentValue.value);
 };
 
 const onUpdateModelValue = (val: string) => {
-  const parse = props.parse ? (value: string) => (props.parse ? String(props.parse(value)) : '') : void 0;
-
-  isValid.value = isValidNumber(val, props.min, props.max, parse);
+  inputValue.value = val;
 
-  if (isValid.value) {
-    numberValue = getRealValue(val, undefined, undefined, parse);
-    if (!isFunction(props.format)) {
-      emits('update:modelValue', numberValue);
-    }
-  }
-  currentValue.value = val;
+  emits('update:modelValue', currentValue.value);
 };
 
 const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
   if (props.disabled) {
     return;
   }
-  let v = Number.isNaN(numberValue) ? 0 : numberValue;
+  let v = Number.isNaN(currentValue.value) ? 0 : currentValue.value;
 
   if (type === 'plus' && canAdd.value) {
     v += props.step;
-    v = updateValue(String(v));
+    v = correctValue(v, lastValue, props.min, props.max);
+    updateValue(v);
     emits('plus', v, e);
   } else if (type === 'minus' && canMinus.value) {
     v -= props.step;
-    v = updateValue(String(v));
+    v = correctValue(v, lastValue, props.min, props.max);
+    updateValue(v);
     emits('minus', v, e);
   }
 };
 </script>
 <template>
   <OInput
-    :model-value="currentValue"
+    :default-value="defaultVal"
+    :model-value="inputValue"
     class="o-input-number"
     :class="[`o-input-number-size-${props.size || defaultSize}`]"
-    :invalid="!isValid"
+    :check-valid="checkValidFun"
+    :on-invalid-change="onInvalidChange"
     :size="props.size"
     :placeholder="props.placeholder"
     :color="props.color"
@@ -176,6 +151,8 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     :disabled="props.disabled"
     :readonly="props.readonly"
     :clearable="props.clearable"
+    :parse="parseFun"
+    :format="props.format"
     type="text"
     @input="onInput"
     @change="onChange"
diff --git a/packages/opendesign/src/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/input-number/__demo__/InputNumberBasic.vue
index 281aedf324096239e7d84518f4ac06acd878f752..cfa9d67aaeab37fc6dacede9746467b6e84ab87d 100644
--- a/packages/opendesign/src/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/input-number/__demo__/InputNumberBasic.vue
@@ -8,7 +8,7 @@ setTimeout(() => {
 }, 2000);
 const val2 = ref(100);
 const val3 = ref(3333);
-const val4 = ref('1px');
+const val4 = ref(1);
 </script>
 <template>
   <h4>Base</h4>
diff --git a/packages/opendesign/src/input-number/__demo__/InputNumberEvent.vue b/packages/opendesign/src/input-number/__demo__/InputNumberEvent.vue
index 1e353858afffc8c4970fdffb77e571ceb83da251..ccca61e9da5d905dc7b5efe509168d3ad477e735 100644
--- a/packages/opendesign/src/input-number/__demo__/InputNumberEvent.vue
+++ b/packages/opendesign/src/input-number/__demo__/InputNumberEvent.vue
@@ -11,7 +11,7 @@ const printEvent = (evt: string, val?: string | number) => {
 };
 
 const format = (val: string | number) => (Number.isNaN(val) ? '' : `$${val ?? ''}`);
-const parse = (val: string) => val.replace(/^\$/g, '');
+const parse = (val: number) => val / 2;
 </script>
 <template>
   <h4>Event</h4>
diff --git a/packages/opendesign/src/input-number/input-number.ts b/packages/opendesign/src/input-number/input-number.ts
index cbeb8db38359a57baa63ebcdf54301610685817a..cc4edcf24ec1aa12480176c0d473df374309be53 100644
--- a/packages/opendesign/src/input-number/input-number.ts
+++ b/packages/opendesign/src/input-number/input-number.ts
@@ -1,8 +1,14 @@
 import { isFunction, isNumber, isUndefined } from '../_utils/is';
 
-export function isValidNumber(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) {
+export function string2number(value: string): number {
+  return value === '' ? NaN : Number(value);
+}
+export function number2string(value?: number): string {
+  return Number.isNaN(value) || isUndefined(value) ? '' : String(value);
+}
+export function isValidNumber(val?: number, min?: number, max?: number, parse?: (value: string) => string) {
   if (Number.isNaN(val)) {
-    return true;
+    return false;
   }
   const value = isFunction(parse) ? parse(String(val)) : val;
   if (isNumber(Number(value))) {
@@ -19,12 +25,10 @@ export function isValidNumber(val?: string | number, min?: number, max?: number,
   return false;
 }
 
-export function getRealValue(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) {
-  const value = isFunction(parse) ? parse(String(val)) : val;
-
+export function getRealValue(val: number, min?: number, max?: number) {
   let rlt: number = NaN;
-  if (value !== '' && isValidNumber(value, min, max)) {
-    rlt = Number(value);
+  if (isValidNumber(val, min, max)) {
+    rlt = val;
     if (min !== undefined) {
       rlt = rlt < min ? min : rlt;
     }
@@ -35,16 +39,15 @@ export function getRealValue(val?: string | number, min?: number, max?: number,
   return rlt;
 }
 
-export function correctValue(val: string | number, lastVal: number, min?: number, max?: number) {
-  const v = Number(val);
-  if (isNumber(v)) {
-    if (!isUndefined(max) && v > max) {
+export function correctValue(val: number, lastVal: number, min?: number, max?: number) {
+  if (isNumber(val)) {
+    if (!isUndefined(max) && val > max) {
       return max;
     }
-    if (!isUndefined(min) && v < min) {
+    if (!isUndefined(min) && val < min) {
       return min;
     }
-    return v;
+    return val;
   }
   return lastVal;
 }
diff --git a/packages/opendesign/src/input-number/types.ts b/packages/opendesign/src/input-number/types.ts
index b3a78307003286f0925529c94971c48e70bfedbe..9ea5d8c7a39fa1d4ceac8dea986a80200924a582 100644
--- a/packages/opendesign/src/input-number/types.ts
+++ b/packages/opendesign/src/input-number/types.ts
@@ -13,14 +13,14 @@ export const inputNumberPorps = {
    * v-model
    */
   modelValue: {
-    type: [String, Number],
+    type: Number,
   },
   /**
    * 下拉框的默认值
    * 非受控
    */
   defaultValue: {
-    type: [String, Number],
+    type: Number,
   },
   /**
    * 按钮点击时步长
@@ -96,7 +96,13 @@ export const inputNumberPorps = {
    * 解析输入框的值
    */
   parse: {
-    type: Function as PropType<(value: string) => number>,
+    type: Function as PropType<(value: number) => number>,
+  },
+  /**
+   * 无效值判断
+   */
+  checkValid: {
+    type: Function as PropType<(value: number) => boolean>,
   },
 };
 
diff --git a/packages/opendesign/src/input/OInput.vue b/packages/opendesign/src/input/OInput.vue
index 30208e95fb43de1e45ba8a078a8c658c1fc7f160..9b0e9742c8a0def03a2b576308f56276700653f4 100644
--- a/packages/opendesign/src/input/OInput.vue
+++ b/packages/opendesign/src/input/OInput.vue
@@ -3,7 +3,6 @@ import { ref, computed, watch } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { isFunction } from '../_utils/is';
 import { IconClose, IconEyeOn, IconEyeOff } from '../_utils/icons';
-import { trigger } from '../_utils/event';
 import { Enter } from '../_utils/keycode';
 import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
@@ -11,6 +10,7 @@ import { inputProps } from './types';
 import { getRoundClass } from '../_utils/style-class';
 import ClientOnly from '../_components/client-only';
 import { uniqueId } from '../_utils/helper';
+import { useComposition } from '../hooks/use-composition';
 
 const props = defineProps(inputProps);
 
@@ -27,72 +27,72 @@ const emits = defineEmits<{
 const inputId = uniqueId('input');
 const inputType = ref(props.type);
 
+const formatFun = computed(() => (isFunction(props.format) ? props.format : (v: string) => v));
+const parseFun = computed(() => (isFunction(props.parse) ? props.parse : (v: string) => v));
+const checkValidFun = computed(() => (isFunction(props.checkValid) ? props.checkValid : () => true));
+
 const inputRef = ref<HTMLElement | null>(null);
 const inputWidth = ref();
 // 数字输入框当前值
 const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
-// 当前input文本值
-const inputText = ref(realValue.value);
+// 当前input显示值
+const inputText = ref(formatFun.value(realValue.value));
+// 记录上一次值(chang事件或者外部prop改变后的值)
+let lastValue: string = realValue.value;
+// 记录上一次有效输入值
+let lastValidInputText: string = inputText.value;
+// 值可用状态
+const isValid = ref(true);
+
+const doCheckValid = (value: string) => {
+  if (value === '') {
+    isValid.value = true;
+  } else {
+    isValid.value = checkValidFun.value(value);
+  }
+  return isValid.value;
+};
+// 初始可用状态
+doCheckValid(realValue.value);
+
+// 是否聚焦状态
+const isFocus = ref(false);
 // 监听属性变化，刷新值
 watch(
   () => props.modelValue,
   (val) => {
-    realValue.value = toInputString(val);
-    inputText.value = realValue.value;
+    // 内部值与传入不一致时，再处理
+    if (realValue.value !== val) {
+      realValue.value = toInputString(val);
+      inputText.value = formatFun.value(realValue.value);
+
+      if (doCheckValid(realValue.value)) {
+        lastValue = realValue.value;
+        lastValidInputText = realValue.value;
+      }
+    }
   }
 );
 
-// 输入框显示的字符串
-const displayValue = computed(() => {
-  const v = isFunction(props.format) ? props.format(realValue.value) : realValue.value;
-  return v;
-});
-
-// 是否聚焦状态
-const isFocus = ref(false);
-let lastValue: string = realValue.value;
 const isClearable = computed(() => props.clearable && !props.disabled && !props.readonly);
 
-function updateValue(val: string) {
-  const value = isFunction(props.parse) ? props.parse(val) : val;
-  emits('update:modelValue', value);
-  realValue.value = value;
-
-  if (lastValue !== value) {
-    emits('change', value);
-    lastValue = value;
-  }
-  return value;
-}
-
-// 正在输入中文，处理输入过程中触发input事件
-let isComposing = false;
 let clickInside = false;
 
-// 开始中文输入
-const onCompositionStart = () => {
-  isComposing = true;
-};
-// 结束中文输入
-const onCompositionEnd = (e: Event) => {
-  if (!isComposing) {
-    return;
-  }
-
-  isComposing = false;
-  trigger(e.target as HTMLElement, 'input');
-};
-
+// 正在输入中文，处理输入过程中触发input事件
+const composition = useComposition({ el: inputRef });
 const onInput = (e: Event) => {
-  if (isComposing) {
+  if (composition.isComposing.value) {
     return;
   }
   const val = (e.target as HTMLInputElement)?.value;
-  emits('input', val, e);
 
+  emits('input', val, e);
+  realValue.value = val;
   inputText.value = val;
 
-  if (!props.parse) {
+  // 有效数据再更改modelValue值
+  if (doCheckValid(val)) {
+    lastValidInputText = val;
     emits('update:modelValue', val);
   }
 };
@@ -103,9 +103,39 @@ const onFocus = (e: FocusEvent) => {
     return;
   }
   isFocus.value = true;
+  if (isValid.value) {
+    inputText.value = realValue.value;
+  }
   emits('focus', realValue.value, e);
 };
 
+function updateValue(val: string) {
+  let nowVal = val;
+  if (!isValid.value) {
+    if (isFunction(props.onInvalidChange)) {
+      nowVal = props.onInvalidChange(val, lastValidInputText, lastValue);
+      isValid.value = true;
+    } else {
+      return lastValue;
+    }
+  }
+  let value = nowVal;
+  if (nowVal !== lastValue) {
+    value = parseFun.value(nowVal);
+  }
+  emits('update:modelValue', value);
+
+  realValue.value = value;
+  inputText.value = formatFun.value(realValue.value);
+
+  if (lastValue !== value) {
+    emits('change', value);
+    lastValue = value;
+    lastValidInputText = value;
+  }
+  return value;
+}
+
 const onBlur = (e: FocusEvent) => {
   if (clickInside) {
     clickInside = false;
@@ -119,7 +149,7 @@ const onBlur = (e: FocusEvent) => {
 
 const onKeyDown = (e: KeyboardEvent) => {
   const keyCode = e.key || e.code;
-  if (!isComposing && keyCode === Enter.key) {
+  if (!composition.isComposing.value && keyCode === Enter.key) {
     const val = (e.target as HTMLInputElement)?.value;
     const v = updateValue(val);
     emits('pressEnter', v, e);
@@ -127,6 +157,9 @@ const onKeyDown = (e: KeyboardEvent) => {
 };
 // 清除值
 const clearClick = (e: Event) => {
+  // 清空值后，纠正不可用样式
+  doCheckValid('');
+  // 更新当前值
   updateValue('');
   emits('clear', e);
 };
@@ -204,7 +237,7 @@ const onEyeMouseDown = () => {
         'has-prepend': $slots.prepend,
         'has-append': $slots.append,
         'is-focus': isFocus,
-        'is-invalid': props.invalid,
+        'is-invalid': !isValid,
         'is-readonly': props.readonly,
         'is-disabled': props.disabled,
       }"
@@ -212,28 +245,28 @@ const onEyeMouseDown = () => {
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
-      <div class="o-input-input-wrap">
+      <div
+        class="o-input-input-wrap"
+        :style="{
+          width: inputWidth + 'px',
+        }"
+      >
         <input
           :id="inputId"
           ref="inputRef"
-          :value="displayValue"
+          :value="inputText"
           :type="inputType"
           :placeholder="props.placeholder"
           class="o-input-input"
           :class="{
             'is-auto-size': props.autoWidth,
           }"
-          :style="{
-            width: inputWidth + 'px',
-          }"
           :readonly="props.readonly"
           :disabled="props.disabled"
           @focus="onFocus"
           @blur="onBlur"
           @input="onInput"
           @keydown="onKeyDown"
-          @compositionstart="onCompositionStart"
-          @compositionend="onCompositionEnd"
         />
         <ClientOnly>
           <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
diff --git a/packages/opendesign/src/input/__demo__/InputBasic.vue b/packages/opendesign/src/input/__demo__/InputBasic.vue
index 33a781e7368a2215fae00bcf109d01cceac99a79..5fb229b785055db835ea2fccf7c54736dde86a7a 100644
--- a/packages/opendesign/src/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/input/__demo__/InputBasic.vue
@@ -9,6 +9,8 @@ const val3 = ref(`${12345}`);
 setTimeout(() => {
   val2.value += '---';
 }, 2000);
+
+const check = (val: string) => Boolean(Number(val) % 2);
 </script>
 <template>
   <div>val1:{{ val1 }}</div>
@@ -28,13 +30,13 @@ setTimeout(() => {
   <h4>color & variant</h4>
   <section>
     <div class="row">
-      <OInput v-model="val1" placeholder="outline + normal" />
+      <OInput v-model="val1" placeholder="outline + normal" :check-valid="check" />
       <OInput v-model="val1" placeholder="outline + success" color="success" />
       <OInput v-model="val1" placeholder="outline + warning" color="warning" />
       <OInput v-model="val1" placeholder="outline + danger" color="danger" />
     </div>
     <div class="row">
-      <OInput v-model="val1" color="normal" placeholder="outline + normal">
+      <OInput v-model="val1" color="normal" placeholder="outline + normal" :check-valid="check">
         <template #prepend><span style="padding: 0 8px">+86</span></template>
         <template #append><span style="padding: 0 8px">手机</span></template>
       </OInput>
diff --git a/packages/opendesign/src/input/__demo__/InputEvent.vue b/packages/opendesign/src/input/__demo__/InputEvent.vue
index 342f40538e21dc4bcd4b5fdddc78714b15d99464..d3179219ecc92ccb7d297a8d10af31202fdf09b3 100644
--- a/packages/opendesign/src/input/__demo__/InputEvent.vue
+++ b/packages/opendesign/src/input/__demo__/InputEvent.vue
@@ -2,29 +2,48 @@
 import { ref } from 'vue';
 import { OInput } from '../index';
 
-const val2 = ref('this is input value');
+const val2 = ref('192-168-1-0');
 const event = ref('--');
 
 const printEvent = (evt: string, val?: string | number) => {
   console.log(`[${evt}]`, val);
   event.value = evt;
 };
+const changeVal = () => {
+  val2.value += '-|-';
+};
+const check = (v: string) => {
+  return v.length % 2 === 0;
+  // return true;
+};
+const format = (v: string) => {
+  return v.replaceAll('-', '.');
+};
+const parse = (v: string) => {
+  const val = parseInt(v);
+  return val ? `${val}` : '';
+};
 </script>
 <template>
   <h4>Event</h4>
   <section>
     <OInput
       v-model="val2"
+      :check-valid="check"
+      :format="format"
+      :parse="parse"
       @blur="(v) => printEvent('blur', v)"
       @change="(v) => printEvent('change', v)"
       @input="(v) => printEvent('input', v)"
       @focus="(v) => printEvent('focus', v)"
       @press-enter="(v) => printEvent('press-enter', v)"
+      @clear="() => printEvent('clear')"
     >
       <template #prepend><span style="padding: 0 8px">+86</span></template>
       <template #append><span style="padding: 0 8px">手机</span></template>
     </OInput>
     value: {{ val2 }}; event:{{ event }};
+    <button @click="changeVal">change value</button>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/input/__demo__/InputMethod.vue b/packages/opendesign/src/input/__demo__/InputMethod.vue
index ad6f74a14d8670b22070a2ff8b27a6d79dd2043a..4e1ce50027e52f4b603ea3e1a92200daaed5e716 100644
--- a/packages/opendesign/src/input/__demo__/InputMethod.vue
+++ b/packages/opendesign/src/input/__demo__/InputMethod.vue
@@ -18,6 +18,8 @@ const printEvent = (evt: string, val?: string | number) => {
       v-model="val2"
       :format="format"
       :parse="parse"
+      placeholder="inputing..."
+      @clear="() => printEvent('clear')"
       @blur="(v) => printEvent('blur', v)"
       @change="(v) => printEvent('change', v)"
       @input="(v) => printEvent('input', v)"
diff --git a/packages/opendesign/src/input/style/style.scss b/packages/opendesign/src/input/style/style.scss
index 03c24c40d433b08a63ea6d91db3223af4d5fcad0..0b7e86d3406a3f49fae75e3d819948c7973dc758 100644
--- a/packages/opendesign/src/input/style/style.scss
+++ b/packages/opendesign/src/input/style/style.scss
@@ -59,6 +59,7 @@
 }
 .o-input-input-wrap {
   width: 100%;
+  margin-right: auto;
 }
 .o-input-input {
   outline: none;
diff --git a/packages/opendesign/src/input/types.ts b/packages/opendesign/src/input/types.ts
index 2ee04f8185def4b659256932f267677e3bf78a51..f3c37650cafa23b606c6ca06f22f389bcab2fe9d 100644
--- a/packages/opendesign/src/input/types.ts
+++ b/packages/opendesign/src/input/types.ts
@@ -104,7 +104,19 @@ export const inputProps = {
    * 需搭配parse处理，保证值的正确性
    */
   format: {
-    type: Function as PropType<(value: string | number) => string | number>,
+    type: Function as PropType<(value: string) => string>,
+  },
+  /**
+   * 无效值判断
+   */
+  checkValid: {
+    type: Function as PropType<(value: string) => boolean>,
+  },
+  /**
+   * 输入为无效值时，在blur
+   */
+  onInvalidChange: {
+    type: Function as PropType<(text: string, lastValidText: string, lastValue: string) => string>,
   },
 };