最近在做项目（angular）时需要做一些动态的响应式验证，市场上提供的一些组件并不能满足要求，所以打算在input上做一些处理达到我们预期的效果，在做的时候遇到一些坑分享出来：
1.pattern使用
pattern这个属性对于input很重要，我们可以设置一些正则表达式去查看我们的输入是否合理，比如 pattern="^[0-9]*$"，只能输入数字，当输入不满足时候我们可以加一些逻辑验证，比如我在angular中：#xxx='ngModel',实例化ngmodel，同时设置[style.border]="xxx.errors? '1px solid red': '1px solid #ccc '"去验证，当然还有很多方式根据业务去判断。
2.样式绑定
我们可以在组件中添加[style.xxx]或者需要同时改变组件几个属性的时候可以使用ngStyle，不过需要注意的是如果存在组件嵌套会把里层组件一起改变，我们可以根据业务去修改是否需要覆盖样式。
3.对input禁止输入空值得坑
对输入框禁止输入空格网上有个事件： οnkeyup="this.value=this.value.replace(/\s+/g,'')"，大概意思就是当我们输入空格的时候变成‘’，但是实际效果是有问题的，比如：οnkeyup="this.value=this.value.replace(/\s+/g,'test')",为了演示效果，当输入空格的时候去变成test，当我们输入两个空格时界面是这样，当时此时的值是：'6test '，会一直少一个test并多一个空格，此时把onkeyup还成oninput就好了
4.onkeydown和onkeyup
两个事件看似没有区别，但是在对应事件获取输入的值时差别大，当输入值触发keydown事件时是先触发事件，所以拿不到此次值，keyup就是输入值之后绑定到了数据源才去触发事件，在使用时要注意。
5.其他input事件：
1.focus 当input 获取到焦点时触发
2.blur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发
3.onchange 当input失去焦点并且它的value值发生变化时触发，当回退到空值时候不会触发
4.onclick 主要是用于 input type=button，当被点击时触发此事件
5.onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发，不是非得全部选中
总结：
我们在使用前端组件时候一定要自己去试试效果，不能盲目套用网上的资料，不然会有很多坑。当然在项目中需要验证的地方多时我们可以采用ngform的响应式表达去实现。