用jQuery、Angular实现登录界面验证码

写在前面：

在前面的事件中，我做了一个与ajax后台异步交互的登录功能，并在上面添加了一个验证码功能。这个函数背后的原理很容易理解，实现起来也很简单。特此写一波分享，写的过程中踩了很多坑。我还是照常在这里详细写，大家可以做个参考，喜欢的朋友可以点赞或者关注一波。

最终效果：

点击登录前，会判断验证码是否正确(验证码可以不区分大小写，也可以区分大小写)。如果验证码错误，验证码将被刷新。验证码验证之前，不会进行跨域登录操作。

整体思考。

1.取一个四位数的随机数

2.将该值赋给验证码的输入框。

3.点击登录前，使用if判断验证码输入框的值是否等于输入框的值。如果相等，则进入下一个操作，如果不相等，则直接返回错误

4.ajax部分可以直接插入。

详细信息：

1.这里验证码框的背景图是在网上找到的，这样可以让验证码更正式，不然看起来有点低。

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

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

4.避免复制验证码。在html中使用：disabled='disabled'——来禁止选择验证码框文本。

以下是代码部分实现过程的详细说明(注释写得更详细):

不应该解释Html代码。不懂的可以在评论区问我。以下是关于棱角的部分。我还没学会。我可以在这里跳，不影响实现效果。(可以复制代码，在本地尝试。)

先播放jq实现的过程，再播放angular实现的过程。看过我文章的人都知道，我会尽力把所有代码和每一步都标注清楚，希望对大家有所帮助。

以下是html的内容：

Div class=' js5-form ' id=' js5-form ' ng-controller=' enter ctrl ' Div id=' enter-all ' H3 jnshu后台登录/H3 form action=' name=' my form ' Div class=' js5-input-Div ' class=' js5-input-img 1 '/Div input id=' js5-user num ' type=' text ' name=' username ' placeholder=' username ' maxlength=' 12 ' ng-model=' username ' ng ' ng-key up=' my key($ event ') Div输入id=' js5-password ' type=' password ' name=' userpsd ' placeholder=' password ' maxlength=' 20 ' ng-model=' userpsd ' ng-key up=' my key($ event)' ng-min length=' 5 ' ng-maxlength='-帐号和密码的登录框-formation=' div class=' js5-input-div ' Span class=' js5-input-div Span '验证码：/Span输入类型=' text' placeholder='不区分大小写' class=' js5 ' -disabled=' disabled '禁止选择验证码框文本-span class=' span shift ' ng-click=' change verify()' get/span/div/form以下是jq代码的实现部分：

var authCoderandomCode=$('#js5-authCode ')。eq(0)；//获取出现验证码的框DOM console . log(randomCode)；函数create code(){ authCode=' '；//设置这个null变量，然后添加一个随机数var authCodeLength=4；//随机数的长度为randomarray=[0，1，2，3，4，5，6，7，8，9，' a '，' b '，' c '，' d '，' e '，' f '，' g '，' h '，' I '。//创建数组，随机数选择四位或四位以上(var I=0；iauthCodeLengthI){ var index=math . floor(math . random()* 36)；//随机取一位数字authCode=randomArray[index]；//取四位数字连接到} console . log(authCode)；//得到四位数随机数后，跳出randomCode.val(authCode)的循环；//给出现验证码的box console.log(randomCode.val())分配一个四位数的随机数；}//以上是封装函数$(function () {//加载文档时，运行此函数createCode()；//运行随机数函数$ ('# JS5-BTN ')。Click(function(){//这是一个click事件控制台. log(window . randomcode)；//这里写的是强制报告。window.randomCode在文档中找到这个dom，否则上面四个随机数不会在这里传输。var random code=window . random code . val()；console . log(randomCode)；var authInput=$(' # js5-form 3-input ')。val()。toUpperCase()，user=$('#js5-userNum ')。val()，psd=$('#js5-password ')。val()；//以上三项是验证码、账号、密码输入框的值。//在这里的框中输入验证码，最后toUpperCase()方法是将小写转换为大写console . log(authInput)；console . log(randomCode)；console.log(用户、PSD)；If (randomCode===authInput) {//验证验证码。在验证码输入框的值不等于验证码的值之前，您不会进入以下登录步骤。验证码是第一步，var first Ajax=new XMLHttpRequest()；//创建ajax对象，这里是ajax firstAjax.open的跨域部分(' POST '，'这里是你url的跨域地址'，true)；//连接到服务器，跨域。first AJax . SetRequestHeader(' Content-type '，' application/x-www-form-URL encoded ')；//setRequestHeader()方法指定HTTP请求的标头，该标头应包含在后续send()调用发出的请求中。//可以理解这是http的请求头，格式固定，打开后发送前必须定位。first AJax . send(' name=' user ' pwd=' PSD)；//使用POST模式时，参数表示发送到服务器的数据，前两个是账号框和密码框firstajax。onreadystatechange=function(){//当参数传递到服务器时，它引用侦听事件。If (firstajax。readystate==4) {//readystate有四种状态。if (firstAjax.status==200) {//返回200，表示成功，但找不到404。var returnValue=JSON . parse(first AJax . responsetext)；//检索服务器返回的数据console . log(return value)；If (returnValue.code==0) {//这是后端定义的。当code==0时，表示登录正确。window . location . href=' https://www . Baidu.com/index . PHP？TN=98012088 _ 3 _ dgch=1 '；//如果后端返回的数据验证成功，跳转到链接。} else { $('#js5Message ')。文本(returnvalue . message)；//当代码不等于0时，返回错误消息}} else {alert ('error，傻笑')；//当返回值不是200时，出现错误。} } };create COde()；//点击登录按钮，验证码会在验证后刷新} else {$('#js5Message ')。文字(‘验证码有误，请重新输入’)；create COde()；//验证码错误。刷新验证码。} })});这是angular代码的实现部分：

jq部分写的很详细，这里也很详细。如果不理解，可以回头看看jq部分。原理是一样的。请尝试在本地复制它。

var enter=angular . module(' myApp ')；进入。控制器(' enterctrl '，['$ scope '，' $ http '，' $ state '，函数($ scope，$ http，$ state) {$ scope。change verify=function(){//定义点击事件，获取验证码var authCode=var authCodeLength=4；//取几个随机数var随机数组=[0，1，2，3，4，5，6，7，8，9，' a '，' b '，' c '，' d '，' e '，' f '，' g '，' h '，' I . for(var I=0；iauthCodeLengthI){ var index=math . floor(math . random()* 36)；//随机取一位数字authCode=randomArray[index]；//取四位数字连接} $ scope.showAuthCode=authCode//分配console . log($ scope . showauthcode)；};//以上是获取验证码的封装函数，将在下面调用(function(){ $ scope . changefverify()；//调用点击事件。$ scope。enter=function (username，userpsd){//点击登录按钮事件，将双向绑定的账号密码作为参数传入function if($ scope . write code . touppercase()=$ scope . showauthcode){//touppercase())将小写转换为大写//双向绑定验证码输入框，可以直接使用。下面是验证码$ http ({method:' post '，url: '您的跨域地址'，/$http的固定格式参数： {'name' : username，' pwd ' 3360 userpsd//双向绑定的参数传递到下一页}})。然后(函数(function) if (res.data.code！==0){ //当参数不为0时，弹出提示告警(RES . data . message)；}else {//当参数为0时，跳转到page $ state . go(' home . studentlist ')；} }) }else {alert('验证码输入错误，傻笑')；$ scope . change verify()；//验证后，刷新验证码} } })；(讲故事时)以后要做的事

我断断续续写了两天，但现在写得没有以前快了。就以上内容，如有疑问，欢迎在评论区留言。如有不足，欢迎指导拍砖。

以上是使用边肖介绍的jQuery，Angular对登录界面验证码的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！