使用jQuery,Angular实现登录界面验证码实例分享

写在前面：

前段事件，做了一个用ajax后台异步交互的登录功能，自己在上面加了一个验证码的功能，这个功能背后的原理挺好理解的，实现起来也十分简单，特此写波分享，，自己写的过程中踩了不少坑，这里还是照例写的详细点，大家可以做个参考，喜欢的朋友可以点个赞，或者关注一波。

最终实现的效果：

当点击登录之前，会先判断验证码是否正确（验证码可以不区分大小写，也可以区分大小写），验证码错误会刷新验证码，验证码验证之前，不会进行跨域登录操作。

整体思路。

1.取四位随机数

2.赋值到验证码的input框里。

3.在点击登录之前先用if判断验证码input框的值和输入框的值是否相等，相等时进入下一步操作，不相等直接返回错误

4.里面ajax的部分可以直接套进去。

细节：

1.这里的验证码框的背景图片是网上自己找的，显得验证码比较正式，不然显得有点low。

2.不区分大小写实际上就是利用js的toUpperCase()方法是把小写转换成大写，因为是原生js所以在angular中也可以使用！

3.将验证码封装成一个函数，然后在点击登录时在最后调用这个函数，可以每次都刷新函数。

4.避免验证码被复制，在html里面使用：disabled="disabled"——禁止验证码框文字被选中。

下面是代码部分实现过程详解（注释写的比较详细）：

html代码应该不会解释了，有不懂的，可以在评论区问我。下面有部分关于angular的内容，暂时还没学到这里可以跳过去，没有影响到实现效果的。(可以把代码复制过去，然后在自己本地试试。)

先放用jq实现的过程，然后放angular实现的过程，看过我几篇文章的都知道，我尽量会把所有代码，每一步都注释的清清楚楚，希望可以帮助到大家。

这里是html的内容：

这里是jq代码实现部分：

这是是angular代码实现部分：

jq部分写的详细一点，这里也挺详细的，如果不懂的话，可以回头看看jq部分，原理都是一样的，复制到本地自己多试试。

后话

断断续续写了两天，现在写的没有之前那么快了。。差不多就以上这些内容，有问题可在评论区留言。有不足欢迎指导，拍砖。

相关推荐：

Ajax实现带有验证码的局部刷新登录界面

js 判断登录界面的账号密码是否为空

CSS3 制作一个material-design 风格登录界面实例

以上就是使用jQuery,Angular实现登录界面验证码实例分享的详细内容，更多请关注Gxl网其它相关文章！