一、前端:
1、页面标签:
<el-row :gutter="20">
<el-col :span="24">
<el-input v-model="loginForm.verificationCode" placeholder="请输入验证码" @focus="resetValidate('verificationCodeMsg')"
prefix-icon="iconfont icon-yanzhengma" @keyup.enter.native="submitForm('loginForm')" auto-complete="off" type="text">
<img slot="suffix" :src="captchaUrl" class="verificationCode" @click="changeCaptchaUrl"></img>
</el-input>
</el-col>
</el-row>
2、js代码:
data{
loginForm: {
userId: '',
password: '',
verificationCode:''
},
loginRule: {
userId: [
{validator: validateuserid, trigger: 'blur'}
],
password: [
{validator: validatePassword, trigger: 'blur'}
],
verificationCode:[
{validator: validateVerificationCode, trigger: 'blur'}
]
},
captchaUrl:'/captcha/getCaptcha'
}
几个js方法:
resetValidate: function (msgKey) {
if(this[msgKey] != ''){
this[msgKey] = '';
this.$refs['loginForm'].clearValidate();
}
},
changeCaptchaUrl:function(){
this.captchaUrl='/captcha/getCaptcha?timestamp=' + new Date().getTime()
},提交表单ajax请求参数中:
"captchaCode":self.loginForm.verificationCode,
function validateVerificationCode(rule, value, callback) {
if (value === '') {
callback(new Error('请输入验证码'));
}else {
callback();
}
}
二、java代码:
ajax请求的后台:
@RequestMapping(value = "/verifyId")
@ResponseBody
public JsonResult<Object> verifyId(String p,HttpServletRequest request) {
JsonResult<Object> json = JsonResult.getFailureResult(true);
String jsonStr=RSAEncryptUtils.decrypt(p);
JSONObject jsonObject=JSONObject.parseObject(jsonStr);
String randomStringSession=(String)request.getSession(true).getAttribute("randomString");
int loginNumInt = 0;
if(jsonObject.getString("loginNum")!= null && jsonObject.getString("loginNum")!=""){
loginNumInt = Integer.parseInt(jsonObject.getString("loginNum"));
// 错误三次及以上要验证码
if(loginNumInt >= 3 && !randomStringSession.equalsIgnoreCase(jsonObject.getString("captchaCode"))){
json.setSuccess(false);
json.setMsg("验证码错误");
return json;
}
}}