詳見D:\workspace\src\renderer\pages\menu\Aside.vue 文件
功能一：當注冊的郵箱有空時，獲取驗證碼按鈕不能被點擊栈拖，當郵箱輸入正確時连舍，獲取驗證碼按鈕才可以點擊。
html 頁面
<!--注冊-->
<div class="opencorelanding-right">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<!-- 郵箱 -->
? ? ? ? <el-form-item prop="email" class="input-but">
<el-row>
<el-col :span="13">
<el-input v-model="ruleForm.email" :placeholder="$t('Login.lists.mailbox')"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set inputEmail" clearable></el-input>
</el-col>
<el-col :span="10" :offset="1">
<el-button type="primary" :disabled="!check" v-show="isCodeGo" @click="send" class="inp-but_code">
<!--獲取驗證碼 -->
? ? ? ? ? ? ? ? ? ? ? <span>{{$t('Login.GetVerificationCode')}}</span>
</el-button>
<!-- <span v-show="isCodeGo===false">{{sixtySecond}}秒可重新發(fā)送 -->
? ? ? ? ? ? ? ? ? ? <el-button type="primary" :disabled="hiddenCode" v-show="isCodeGo===false"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style="margin-left:-4px;width:154px;text-align:center;">
<span style="margin-left:-11px;">{{sixtySecond}}? {{$t('Login.lists.SecondsToResend')}}</span>
</el-button>
</el-col>
</el-row>
</el-form-item>
<!--郵箱驗證碼-->
? ? ? ? <el-form-item prop="authCode" class="input-but">
<el-input v-model="ruleForm.authCode" :placeholder="$t('Login.lists.EmailVerificationCode')"
? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set" clearable></el-input>
</el-form-item>
<!-- 密碼 -->
? ? ? ? <el-form-item prop="pass" class="input-but">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"
? ? ? ? ? ? ? ? ? ? ? :placeholder="$t('Login.lists.Password')" class="opencorelanding-right-set"
? ? ? ? ? ? ? ? ? ? ? clearable></el-input>
</el-form-item>
<!-- 再次確認密碼 -->
? ? ? ? <el-form-item prop="checkPass" class="input-but">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"
? ? ? ? ? ? ? ? ? ? ? :placeholder="$t('Login.lists.confirmPassword')" class="opencorelanding-right-set"
? ? ? ? ? ? ? ? ? ? ? clearable></el-input>
</el-form-item>
<!-- 姓名 -->
? ? ? ? <el-form-item prop="name" class="input-but">
<el-input v-model="ruleForm.name" :placeholder="$t('Login.lists.Name')"
? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set"? clearable></el-input>
</el-form-item>
<!-- 手機號 -->
? ? ? ? <el-form-item prop="tel" class="input-but">
<el-input v-model="ruleForm.tel" :placeholder="$t('Login.lists.MobilePhone')"
? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set" clearable></el-input>
</el-form-item>
<!-- 所屬公司 -->
? ? ? ? <el-select v-model="companiesType" size="small" @change="switchChange(companiesType)"
? ? ? ? ? ? ? ? ? class="opencorelanding-right-set" :placeholder="$store.state.info_language?'Affiliated company':'所屬公司'"
? ? ? ? ? ? ? ? ? style="width:310px">
<el-option
? ? ? ? ? ? ? ? ? ? v-for="(item,index) incompanies"
? ? ? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? ? ? :label="item.lable"
? ? ? ? ? ? ? ? ? ? :value="item.type"
? ? ? ? ? ? >
</el-option>
</el-select>
<br>
<!-- 所屬部門 -->
? ? ? ? <el-form-item v-if='see' prop="departmentTypeData" class="input-but"
? ? ? ? ? ? ? ? ? ? ? :rules="[
{required: true,message:$t('Login.lists.DepartmentCannotBeEmpty'),trigger: 'change'}
]"
? ? ? ? ? ? ? ? ? ? ? key="departmentTypeData" >
<el-select v-model="ruleForm.departmentTypeData" size="small"
? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set" :placeholder="$t('Login.lists.Department')"
? ? ? ? ? ? ? ? ? ? ? clearable style="width:310px">
<el-option v-for="itemindepartment"
? ? ? ? ? ? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? ? ? ? ? ? :label="item.value"
? ? ? ? ? ? ? ? ? ? ? ? ? :value="item.id">
</el-option>
</el-select>
</el-form-item>
<!--其他公司的部門 message: '部門不能為空'-->
? ? ? ? <el-form-item prop="otherDepartment" v-else
? ? ? ? ? ? ? ? ? ? ? :rules="[
{required: true,message:$t('Login.lists.DepartmentCannotBeEmpty'),trigger: 'blur'}
]"
? ? ? ? ? ? ? ? ? ? ? key="otherDepartment"
? ? ? ? >
<el-input v-model="ruleForm.otherDepartment"? :placeholder="$store.state.info_language?'department':'部門'"
? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set" clearable></el-input>
</el-form-item>
<!-- 所屬職位 -->
? ? ? ? <el-form-item v-if='see' prop="psitionTypeData" class="input-but"
? ? ? ? ? ? ? ? ? ? ? :rules="[
{required: true,message:$t('Login.lists.PositionCannotBeEmpty'),trigger: 'change'}
]"
? ? ? ? ? ? ? ? ? ? ? key="psitionTypeData"
? ? ? ? >
<el-select v-model="ruleForm.psitionTypeData" size="small" class="opencorelanding-right-set"
? ? ? ? ? ? ? ? ? ? ? :placeholder="$store.state.info_language?'Subordinate position':'所屬職位'"
? ? ? ? ? ? ? ? ? ? ? clearable style="width:310px">
<el-option
? ? ? ? ? ? ? ? ? ? ? ? v-for="iteminpsition"
? ? ? ? ? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? ? ? ? ? :label="item.value"
? ? ? ? ? ? ? ? ? ? ? ? :value="item.id">
</el-option>
</el-select>
</el-form-item>
<!--其他公司的職位-->
? ? ? ? <el-form-item prop="otherPosition" v-if="switcher"
? ? ? ? ? ? ? ? ? ? ? :rules="[
{required: true,message:$t('Login.lists.PositionCannotBeEmpty'),trigger: 'blur'}
]"
? ? ? ? ? ? ? ? ? ? ? key="otherPosition"
? ? ? ? >
<el-input v-model="ruleForm.otherPosition" :placeholder="$store.state.info_language?'position':'職位'"
? ? ? ? ? ? ? ? ? ? ? class="opencorelanding-right-set" clearable></el-input>
</el-form-item>
<!--設置插槽不顯示底注冊和取消按鈕涩哟，暫時先不設置-->
? ? ? ? <el-checkbox v-model="checked" class="check" ></el-checkbox>
<span @click="dialog" class="user">{{$t('Login.UserInstructions')}}</span>
<div class="dialog-footer">
<el-button @click="opencorelanding= false" class="inp-but">
{{$t('Login.lists.button[0]')}}
</el-button>
? ? ? ? ? ? <el-button type="primary" @click="submitForm('ruleForm')" :disabled="!checked" class="inp-but">
{{$t('Login.lists.button[1]')}}
</el-button>
</div>
</el-form>
</div>
check:false,// 郵箱校驗成功時索赏，才可以獲取驗證碼
hiddenCode:false,
sixtySecond:60, //60秒倒計時
isCodeGo:true,// 是否可重新發(fā)送驗證碼
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'}
]
},
注冊校驗的回調(diào)函數(shù)在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()
}
}
// 密碼驗證--規(guī)則：6-32位字母和數(shù)字組合
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('密碼為字母數(shù)字結(jié)合，6-32位密碼'))
? ? ? ? return callback(new Error(this.$t('Login.lists.BitPassword')))
}else {
callback()
}
}
// 再次輸入密碼驗證--規(guī)則：6-16位字母和數(shù)字組合
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()
}
}
// 姓名驗證--規(guī)則：只支持中文和英文
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("用戶名對了")
}
}
// 密碼驗證--規(guī)則：6-16位字母和數(shù)字組合
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("密碼對了")
}
}
// 發(fā)送郵箱地址染簇，接受驗證碼 代碼在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);
})
