简略式input text框强制输入

前言

    现在前端的各种插件,不管是数量还是类型,都可以用数不胜数来形容了。

    对于表单输入验证这一块,网上随便一搜,也是各种实现代码和插件等等的文章。

    插件虽然好用,但是有时候我们需要的往往只是其中的一小个功能块,却不得已要把整个一大坨的插件代码引进去,这过程前,过程中,以及过程后,心里多多少少会 感觉不爽不开心不完美。

嗖嗖嗖

    个人 水平有限,高端大气上档次的代码撸不出来,但是日常中,那种重复性的,能共用的,或者一些简单的工具性的代码,还是比较喜欢去折腾的,毕竟懒人。

    最近要input文本框弄一个强制输入,input标签都是散乱在页面中的,也懒得麻烦,所以就没有搞form了,提交前验证也比较简略,所以就在他输入的时候,给他定死强行只能输哪些东西。

    强制输入这个,应该都很熟悉,就是这样的:

    <input type="text" onkeyup="this.value=this.value.replace(\/D\, ' ')" />

但是,当页面上的input标签越来越多的时候,这种写法就感觉很心累了,因为你要去每一个上面都加上这东西。

那么,这时我们来观摩一下一般别人验证插件里的写法,发现一般都是直接在标签里面加特定和类名和自定义属性,然后去做验证。可是,如果我们自己写的话,类名好加,自定义属性如果多了,取起来以及对应匹配规则也觉得麻烦(我自己是这么认为的),所以,这里分享一种写法,大神自动无视就好

html 添加标签-就加了2个input框,样式什么的。。。啊,原生样式能看出来这个是input啊,不影响使用


单独建一个js文件,把验证规则单独放在这文件里-这里就写了2个,意思一下,也没来得及弄多点来测试


最后就是调用



更多好玩的规则,按需添加。更多坑爹的要求,慢慢实现。

就是这么多内容了,下面没有底线的


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,241评论 4 61
  • 有时候呆的可怕,没有一点气息,连说话都没劲,走个平路都感觉累,有时要激情四射,感觉全世界我最大,世界万物尽在我的掌...
    黄昏读少年阅读 201评论 0 0
  • 01 踏青 草长莺飞,百花盛开,枊枝碧青,正是踏青好时间。春日暖阳,暖风吹拂,幽静的阡陌小径,田野花香。 蜜蜂贪恋...
    幸美人阅读 393评论 0 1
  • 今天的大事儿,我去入职啦。这么多天不工作,还是有那么点儿激动的,到新环境还是有点儿慌。每到一个新环境,需要和陌生人...
    王二姐的记事本儿阅读 128评论 0 0