美文网首页UFEG-A
简略式input text框强制输入

简略式input text框强制输入

作者: 让心动变永恒 | 来源:发表于2018-04-25 20:24 被阅读152次

    前言

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

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

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

    嗖嗖嗖

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

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

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

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

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

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

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

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

    最后就是调用

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

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


    相关文章

      网友评论

        本文标题:简略式input text框强制输入

        本文链接:https://www.haomeiwen.com/subject/ehaylftx.html