学生管理系统开发记录-图片验证码功能

图片验证码

加了图片验证码功能，代码是网上找的，自己理清楚了逻辑，就没有重新写了，主要是调整排版和提交前验证遇到了一些问题，之前也遇到过类似问题，但我给忘了，花费了半小时才找到问题根源，因此觉得有必要记录一下。

提交前验证和全局变量

表单提交前进行验证的验证函数，
比如我在一个函数中生成了一个数，它的作用域在函数内，而验证函数中使用它是不起作用的，这时需要将它换成全局变量。
但如果我不想使用全局变量呢？还有没有不使用全局变量也可以访问其他函数内变量的方法呢？

1. 传参，也就是在其他函数内调用该函数，传入一个参数，但在这种情况下是不适用的，因为我们需要点击提交后才调用验证函数。
2. 定义一个对象（不必需），将验证函数作为另一个函数的属性，在调用时使用new father().validate()。
   如下，验证函数isNum()想要使用father中的num，又不想使他变为全局变量，则可以将验证函数作为father的属性。：

function father(){
	let num = 4;
	this.validate = function(num){
		return num == 4;
	}
}

<form method="post" onsubmit="return new father().validate()">

参考资料：
js从外部访问内部函数
类似问题

调整排版

一个canvas一个input，目的是让它们排排坐，不要东一个西一个
我用的框架是bootstrap5，直接套css

<canvas id="canvas" width="120" height="40" class=""></canvas>
<input class="form-control " type="text" id="verify" placeholder="请输入验证码" name="verify">

一开始是长这样的，非得各占一行。

于是我找到bootstrap.css中的form-control类，将其copy到自定义css文件，删除width:100%属性。
这下变成了一排了，却发现它们下面没有对齐

于是利用flexbox让它们对齐各占一半：

<div class="row">
	<canvas id="canvas" width="120" height="40" class="col-sm-5"></canvas>
	<input class="myFormControl col-sm-5" type="text" id="verify" placeholder="请输入验证码" name="verify">
</div>

最终效果：

css:

.myFormControl {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #55595c;
  background-color: #f7f7f9;
  background-clip: padding-box;
  border: 0 solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.myFormControl:focus {
  color: #55595c;
  background-color: #f7f7f9;
  border-color: #8d8d8d;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(26, 26, 26, 0.25);
}
.col-sm-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}