js页面输入验证码怎么进行校验

JavaScript015

js页面输入验证码怎么进行校验,第1张

<html>

<head>

<script language="javascript" type="text/javascript">

var code

function createCode(){

code = new Array()

var codeLength = 4

var checkCode = document.getElementById("checkCode")

checkCode.value = ""

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z')

for(var i=0i<codeLengthi++) {

var charIndex = Math.floor(Math.random()*32)

code +=selectChar[charIndex]

}

checkCode.value = code

}

function validate () {

var inputCode = document.getElementById("yzm").value.toUpperCase()

if(inputCode != code ){

alert("验证码错误！")

return false

}

else {

alert("验证码正确！")

return true

}

}

</script>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

</head>

<body onLoad="createCode()">

验证码：<input type="text" id="yzm" size="5" />

<input type="button" id="checkCode" onClick="createCode()" title="刷新验证码" style="width:50pxcolor:#F00border:0letter-spacing:1pxfont-family:Arial" />

<input type="button" id="Button1" onClick="validate()" value="确定" />

</body>

</html>

我发现现在回答问题的人真是无聊，不能把答案写全？

这个JS首先引用：

<link href="Scripts/idcode/jquery.idcode.css" rel="stylesheet" type="text/css" />

<script src="Scripts/idcode/jquery.idcode.js" type="text/javascript"></script>

然后加载它的一个方法：

<script type="text/javascript">

$(document).ready(function () {

$.idcode.setCode()

})

</script>

然后要到它的JS文件去指定一个输入验证码框的ID

var settings = {

e : 'idcode',

codeType : { name : 'follow', len: 4},

codeTip : 'refresh?',

inputID:'Txtidcode'//这个就是你页面输入验证码的文本框ID

}

然后是页面元素：

<label class ="lblVerification">验证码</label>

<input type ="text" id ="Txtidcode" class ="txtVerification" />

<span id="idcode"></span>

最后是JS调用：var IsBy = $.idcode.validateCode()返回的是true或false。这样就可以验证

这个不能使用js来做，js属于客户端脚本，手机验证码不能通过任何方式显示到前端，所以js不能来做校验

实现方案是，点击获取验证码，发送手机号到服务端，服务端通过短信平台网关接口发送验证码；用户接收到验证码，输入验证码，然后将手机号和验证码同时提交到服务端，由服务端进行验证，并返回是否验证通过

整个过程中验证码并未出现在前端