import java.util.*; public class Case2 { public static void main(String[] args) { String str2=CreatCode(5); System.out.println("您的验证码是:"+str2); System.out.println("请输入验证码:"); Scanner sc=new Scanner(System.in); String str1=sc.next(); equal(str1,str2); } public static boolean equal(String str1, String str2){ if (str1.equals(str2)) { System.out.println("验证通过!"); return true; } else{ System.out.println("验证码错误"); return false; } } public static String CreatCode(int n){ Random r=new Random(); String code=""; for (int i = 0; i < n; i++) { switch (r.nextInt(3)){ case 0: code+=r.nextInt(10); break; case 1: char ch1= (char) (r.nextInt(25)+65); code+=ch1; break; case 2: char ch2= (char) (r.nextInt(25)+97); code+=ch2; break; } } return code; } }根据这个代码,请帮我写一个前端页面
时间: 2024-04-13 11:30:00 浏览: 101
以下是一个简单的HTML前端页面示例,用于接收用户输入验证码并与生成的验证码进行比较:
```html
<!DOCTYPE html>
<html>
<head>
<title>验证码验证</title>
</head>
<body>
<h1>验证码验证</h1>
<form id="codeForm">
<label for="codeInput">请输入验证码:</label>
<input type="text" id="codeInput" name="codeInput">
<button type="submit">提交</button>
</form>
<script>
document.getElementById("codeForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var codeInput = document.getElementById("codeInput").value; // 获取用户输入的验证码
// 发送AJAX请求到后端进行验证码比较
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.valid) {
alert("验证通过!");
} else {
alert("验证码错误");
}
} else {
alert("请求出错");
}
}
};
xhr.open("POST", "validateCode", true); // 替换为后端验证接口的URL
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({ code: codeInput }));
});
</script>
</body>
</html>
```
注意:这是一个简单的示例,实际情况中需要根据具体需求进行适当的修改和优化。另外,后端接口"validateCode"需要根据具体的后端实现进行调整。
阅读全文