view+element+java登陆验证码

一、前端：

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;
            }
        }

}