如何封装input验证
如何封装input验证
墨客行人 发表于1年前
如何封装input验证
  • 发表于 1年前
  • 阅读 631
  • 收藏 28
  • 点赞 0
  • 评论 7

标题:腾讯云 新注册用户域名抢购1元起>>>   

首先我们来看一下我的这个html的结构,当然你们也可以根据你们自己的风格去布局

然后在简单的看一下css样式这里我没有做过多的修改,如果你觉得样式不好看当然也可以根据你自己风格来做一个简单的布局

我们在来看看我们的js是如何封装的,当然你们可能也有你们更好的见解!这里我是过对象的方式把所有的验证集成在对象里面相信你们看过后 并不陌生吧

相信上面的代码你们看的懂的吧!如果不理解可以联系我。

做到这里大家有没有发现里面的代码很臃肿的,其实我也是这么想的,看着没毛病其实有一部分是可以提出来公用这样就可以减少代码的额复写量,那么接下来我就讲这段代码整个一下

 

                                               这是后面的代码!

 

                                                                 

       就是上面这段代码提出来单独封装了一个函数

 

 

 

 

从上面可以看出有段代码我单独封装在一个函数里面了,这样减少了代码量,还有里面我只做了手机号的一个失去焦点效果,其他的就不一一列举出来的,想必你也会知道怎么做了,

还有ajax请求部分我就不一一讲解了,在这里主要是因为我一直苦于写表单验证比较繁琐没时间去封装,现在空闲下来写了这一个小小的表单插件。我觉得应该会满足大多数人的要求了,只是正则表达式不够全面,这个需要你自己去写了,小编我就不一一给你写了。

      如果那位大神看到觉得有什么不妥的还望不吝你个赐教,谢谢!

标签: 纯属原创
共有 人打赏支持
粉丝 1
博文 2
码字总数 501
评论 (7)
monee1988
js验证一个字段写一遍,不累么。再说js写一堆容易使人烦躁,你懂的。
墨客行人

引用来自“Monee”的评论

js验证一个字段写一遍,不累么。再说js写一堆容易使人烦躁,你懂的。
好吧,谢谢
墨客行人

引用来自“Monee”的评论

js验证一个字段写一遍,不累么。再说js写一堆容易使人烦躁,你懂的。
谢谢,你的意思是把那几个验证也封装在一个函数里面,是这样的么?
Keveon
便利整个form岂不是更好!?
Keveon

引用来自“Kerwin9696”的评论

便利整个form岂不是更好!?

抱歉,打错字了,遍历。
monee1988

引用来自“Kerwin9696”的评论

引用来自“Kerwin9696”的评论

便利整个form岂不是更好!?

抱歉,打错字了,遍历。

+1
墨客行人

引用来自“Kerwin9696”的评论

引用来自“Kerwin9696”的评论

便利整个form岂不是更好!?

抱歉,打错字了,遍历。

回复@Kerwin9696 : 恩是的谢谢!有时间我去完善一下,不过我主要对于验证做了下,用form传值是简单些,多谢指教
×
墨客行人
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: