注册
-
界面如图
-
前端验证
- html页面代码
<form id="form_reg">
<div>
<input type="text" id="account" name="account" placeholder="请输入邮箱" />
</div>
<div class="isMale">
<input type="radio" name="male" id="male" value="true" checked><label for="male">男</label>
<input type="radio" name="male" id="female" value="false"><label for="female">女</label>
</div>
<div>
<input type="password" id="password" name="password" placeholder="请输入密码" />
</div>
<div>
<input type="password" id="repeatPassword" name="repeatPassword" placeholder="请重复密码" />
</div>
<div>
<table border="0" height="60px">
<tr>
<td><input type="text" id="yzm" name="yzm" style="width: 100%; height: 40px; display: inline-block;"></td>
<td><p style="width: 20px;"></p></td>
<td> <img src="/doGet" alt="" id="captcha1" onclick="refreshCaptcha()" style="height: 40px; width: 100%; vertical-align: middle;">
</td>
</tr>
</table>
</div>
<div>
<input id="btnSubmit" type="submit" value="注册"><br><br>
</div>
</form>
- JQuery实现前端验证
<script>
function refreshCaptcha(){
var ran = Math.floor(Math.random() * 100)
$('#captcha1').attr('src','/doGet?' + ran);
}
$('#btnSubmit').on('click',function(event){
event.preventDefault();
if ($('#account').val().trim().length < 1) {
layer.msg('请选择或填写邮箱!');
$('#account').focus();
return;
}
var reg1 = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
var input1 = $('#account').val();
if(!reg1.test(input1)){
layer.msg('邮箱格式错误,请输入正确邮箱');
return;
}
if ($('#password').val().trim().length < 1) {
layer.msg('请填写密码!');
$('#password').focus();
return;
}
var pass = /^[a-zA-Z]\w{5,17}$/;
var input2 = $('#password').val();
if(!pass.test(input2)){
layer.msg('密码长度要在6~18位之间,且必须以字母开头!')
return;
}
if ($('#repeatPassword').val().trim().length < 1) {
layer.msg('请填写确认密码!');
$('#repeatPassword').focus();
return;
}
if (($('#repeatPassword').val().trim())!=($('#password').val().trim())) {
layer.msg('两次密码填写不一致!');
$('#repeatPassword').focus();
return;
}
if ($('#yzm').val().trim().length < 1) {
layer.msg('请填写验证码!');
$('#yzm').focus();
return;
}
$.post('/api/register', $('#form_reg').serialize(), function(res) {
if(res.code == 200){
setTimeout(function(){
location.reload();
},2000);
layer.msg('注册成功,请前往邮箱进行激活登录!')
}else{
//$('.error-message').text(res.message);
layer.msg(res.message)
}
})
})
</script>
-
后台验证
- 前端后台使用的连接方式是MyBatis;
- 后台验证代码如下:
String regex = "^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$";
if( !match(regex,account)){
return new JSONResult(400,"邮箱格式错误!");
}
if(!password.equals(repeatPassword)){
message ="两次输入密码不一致";
}
if(!yzm.equals(varCode)){
message = "验证码输入不正确";
}
- 邮箱激活功能,需要导入邮箱写邮件的依赖、权限等,此处不详细介绍,
WriteEmail.emailSend(user.getEmail(), "http://localhost:8088/" + salt);
登录
-
登录页面如下:
-
前端验证,代码如下:
- Form表单代码
<form id="form_login">
<div>
<input type="text" id="account" name="account" placeholder="请输入邮箱">
</div>
<div>
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
<div>
<input id="btnLogin" type="submit" value="登录">
</div>
</form>
- Jquery验证,
<script>
$('#btnLogin').on('click',function(event){
event.preventDefault();
if ($('#account').val().trim().length < 1) {
layer.msg('请填写邮箱或手机号')
$('#account').focus();
return;
}
var reg = /^1[34578]\\d{9}$/;
var reg2 = /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
var input2 = $('#account').val();
var input1 = $('#account').val();
if(!reg.test(input1)&&!reg2.test(input2)){
layer.msg('请输入正确的邮箱或者手机格式!')
}
if ($('#password').val().trim().length < 1) {
layer.msg('请选择或填写密码!');
$('#password').focus();
return;
}
$.post('/api/login', $('#form_login').serialize(), function(res) {
if(res.code == 200){
setTimeout(function(){
location.href = '/index';
},2000);
layer.msg('登录成功,正在跳转')
}else{
//$('.error-message').text(res.message);
layer.msg(res.message)
}
})
})
</script>
- 后台验证,代码如下:
String mobile = "^1[34578]\\d{9}$";
String regex = "^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$";
System.out.println(match(regex,account));
if( !match(regex,account) && !match(mobile,account)){
return new JSONResult(400,"邮箱或手机号格式错误!");
}else {
User user = userService.login(account, password);
log.info("user", user);
if(user==null){
return new JSONResult(400,"账号或密码错误!");
}else {
if(user.getStatus()!=2){
return new JSONResult(400,"邮箱未注册或未激活!");
}
- 总结:
验证需要前端后端都进行验证,不能感觉前端验证了就安全了,bug是未知的,风险就是未知的,可能会导致不可挽回的错误,在验证的同时,不调用数据库来实现验证,上线的项目,数据库注入一样的危险!!!