详见D:\workspace\src\renderer\pages\menu\Aside.vue 文件
功能一：当注册的邮箱有空时，获取验证码按钮不能被点击，当邮箱输入正确时，获取验证码按钮才可以点击。
html 页面
class="opencorelanding-right-set inputEmail" clearable>
{{$t('Login.GetVerificationCode')}}
style="margin-left:-4px;width:154px;text-align:center;"> {{sixtySecond}} {{$t('Login.lists.SecondsToResend')}}
class="opencorelanding-right-set" clearable>
:placeholder="$t('Login.lists.Password')" class="opencorelanding-right-set" clearable>
:placeholder="$t('Login.lists.confirmPassword')" class="opencorelanding-right-set" clearable>
class="opencorelanding-right-set" clearable>
class="opencorelanding-right-set" clearable>
class="opencorelanding-right-set" :placeholder="$store.state.info_language?'Affiliated company':'所属公司'" style="width:310px"> v-for="(item,index) incompanies" :key="item.value" :label="item.lable" :value="item.type" >
:rules="[ {required: true,message:$t('Login.lists.DepartmentCannotBeEmpty'),trigger: 'change'} ]" key="departmentTypeData" > class="opencorelanding-right-set" :placeholder="$t('Login.lists.Department')" clearable style="width:310px"> :key="item.value" :label="item.value" :value="item.id">
:rules="[ {required: true,message:$t('Login.lists.DepartmentCannotBeEmpty'),trigger: 'blur'} ]" key="otherDepartment" > class="opencorelanding-right-set" clearable>
:rules="[ {required: true,message:$t('Login.lists.PositionCannotBeEmpty'),trigger: 'change'} ]" key="psitionTypeData" > :placeholder="$store.state.info_language?'Subordinate position':'所属职位'" clearable style="width:310px"> v-for="iteminpsition" :key="item.value" :label="item.value" :value="item.id">
:rules="[ {required: true,message:$t('Login.lists.PositionCannotBeEmpty'),trigger: 'blur'} ]" key="otherPosition" > class="opencorelanding-right-set" clearable>
{{$t('Login.UserInstructions')}}
check:false,// 邮箱校验成功时，才可以获取验证码
hiddenCode:false,
sixtySecond:60, //60秒倒计时
isCodeGo:true,// 是否可重新发送验证码
timer:null,// 定时器
hiddenCode:false,
// 注册验证
rules: {
// 验证邮箱
email: [
{required:true,validator:validateNameZh,trigger:'blur'},
],
// 验证邮箱验证码
authCode: [
{required:true,validator:authcode,trigger:'blur'},
],
// 输入密码
pass: [
{required:true,validator:validatePass,trigger:'blur'}
],
// 再次输入密码
checkPass: [
{required:true,validator:validatePass2,trigger:'blur'}
],
// 验证姓名
name: [
{required:true,validator:verifyName,trigger:'blur'}
],
// 验证电话
tel: [
{required:true,validator:verifyTel,trigger:'blur'}
],
// 其他公司的部门
otherDepartment: [
{required:false,message:'请输入所属部门',trigger:'blur'},
{min:2,max:10,message:'长度在2到10个字符',trigger:'blur'}
],
// 其他公司的职位
otherPosition: [
{required:false,message:'请输入所属职位',trigger:'blur'},
{min:2,max:10,message:'长度在2到10个字符',trigger:'blur'}
]
},
注册校验的回调函数在data下面return上面
// 邮箱
const validateNameZh = (rule, value, callback) => {
if (value.trim() ==='') {
// return callback(new Error('请输入邮箱'))
this.check =false;
return callback(new Error(this.$t('Login.lists.PleaseEnterEmail')))
}else if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
this.check =false;
// return callback(new Error('请输入合法邮箱'))
return callback(new Error(this.$t('Login.lists.PleaseEnterALegalEmail')))
}else {
this.check =true;
callback()
}
}
// 邮箱验证码
const authcode = (rule, value, callback) => {
if (value.trim() ==='') {
// return callback(new Error('请输入邮箱验证码'))
return callback(new Error(this.$t('Login.lists.VerificationCode')))
}else if (!/^\d{6}$/.test(value)) {
// return callback(new Error('请输入6位邮箱验证码'))
return callback(new Error(this.$t('Login.lists.DigitEmailVerificationCode')))
}else {
callback()
}
}
// 密码验证--规则：6-32位字母和数字组合
const validatePass = (rule, value, callback) => {
if (value.trim() ==='') {
// return callback(new Error('请输入密码'))
return callback(new Error(this.$t('Login.lists.PleaseInputAPassword')))
}else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,32}$/.test(value)) {
// return callback(new Error('密码为字母数字结合，6-32位密码'))
return callback(new Error(this.$t('Login.lists.BitPassword')))
}else {
callback()
}
}
// 再次输入密码验证--规则：6-16位字母和数字组合
const validatePass2 = (rule, value, callback) => {
if (value.trim() ==='') {
// return callback(new Error('请再次输入密码'))
return callback(new Error(this.$t('Login.lists.ThePasswordAgain')))
}else if (value !==this.ruleForm.pass) {
// return callback(new Error('两次输入密码不一致!'))
return callback(new Error(this.$t('Login.lists.TheTwoPasswordsAreInconsistent')))
}else {
callback()
}
}
// 姓名验证--规则：只支持中文和英文
const verifyName = (rule, value, callback) => {
if (value.trim() ==='') {
// return callback(new Error('请输入姓名'))
return callback(new Error(this.$t('Login.lists.PleaseEnterAName')))
}else if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
// return callback(new Error('只支持中文和英文'))
return callback(new Error(this.$t('Login.lists.OnlyChineseAndEnglishAreSupported')))
}else {
callback()
}
}
// 手机号验证
const verifyTel = (rule, value, callback) => {
if (value.trim() ==='') {
// return callback(new Error('请输入手机号'))
return callback(new Error(this.$t('Login.lists.YourMobileNumber')))
}else if (!/^1[3456789]\d{9}$/.test(value)) {
// return callback(new Error('请输入正确的手机号'))
return callback(new Error(this.$t('Login.lists.TheCorrectMobileNumber')))
}else {
callback()
}
}
// 登录--用户名（邮箱）
const loginEmail = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true;
// return callback(new Error('请输入邮箱'))
return callback(new Error(this.$t('Login.lists.PleaseEnterEmail')))
}else if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
this.forbidden =true;
// return callback(new Error('请输入合法邮箱'))
return callback(new Error(this.$t('Login.lists.PleaseEnterALegalEmail')))
}else {
callback()
this.forbidden =false;
console.log("用户名对了")
}
}
// 密码验证--规则：6-16位字母和数字组合
const loginPass = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true;
// return callback(new Error('请输入密码'))
return callback(new Error(this.$t('Login.lists.PleaseInputAPassword')))
}else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,32}$/.test(value)) {
this.forbidden =true;
// return callback(new Error('请输入6-32位的密码'))
return callback(new Error(this.$t('Login.lists.BitPassword')))
}else {
callback()
this.forbidden =false;
console.log("密码对了")
}
}
// 发送邮箱地址，接受验证码 代码在script中的methods方法中
对应上面的点击时间send
send() {
if (!this.timer) {
this.isCodeGo =false;
this.timer =setInterval(() => {
if (this.sixtySecond >0 &&this.sixtySecond <=60) {
this.sixtySecond--;
this.hiddenCode =true;
}else {
this.isCodeGo =true;
clearInterval(this.timer);
this.timer =null;
this.sixtySecond =60
}
},1000)
}
// console.log(_back_public)
let params = {'email':this.ruleForm.email}
/* console.log(params);
console.log(this.ruleForm.email);*/
//
// if(this.forbidden){
// return false
// }
this.$axios.post(this.requestURL+'/client/verificationCode',params,
{'Content-Type':'application/json'})
.then((res) => {
if(res.data.status ==1){
this.code = res.data.data;
console.log(this.code)
this.$message({
message: res.data.msg,
type:'success'
});
}else{
this.$message({
message: res.data.msg,
type:'warning'
});
}
}).catch((error) => {
console.log(error);
})