子组件页面
<el-form-item prop="mobile" class="mobile">
<div class="tel_text">+86</div>
<el-input
v-model="verification.mobile"
placeholder="手机号"
autocomplete="off"
@keyup.native="kong"
></el-input>
</el-form-item>
<el-form-item> <div id="nc"></div></el-form-item>
<el-form-item prop="smsCode" class="send">
<el-input
v-model="verification.smsCode"
placeholder="短信验证码"
autocomplete="off"
@keyup.native="kong"
></el-input>
<p class="send_yzm" v-if="sendyzm == false" @click="sendSms">
{{ codeBtn }}
</p>
<p class="again_yzm" v-else>{{ count }}s</p>
</el-form-item>
<el-form-item prop="pass" class="psd_style">
<el-input
:type="flag ? 'text' : 'password'"
v-model="verification.pass"
autocomplete="off"
placeholder="设置新密码( 6-18位数字/字母 )"
@keyup.native="kong"
>
<i
slot="suffix"
:class="flag ? 'el-icon-view' : 'el-icon-minus'"
@click="flag = !flag"
></i>
</el-input>
</el-form-item>
<el-form-item prop="checkPass" class="psd2_style">
<el-input
:type="flageye ? 'text' : 'password'"
v-model="verification.checkPass"
autocomplete="off"
placeholder="再次输入新密码"
@keyup.native="kong"
>
<i
slot="suffix"
:class="flageye ? 'el-icon-view' : 'el-icon-minus'"
@click="flageye = !flageye"
></i>
</el-input>
</el-form-item>
<el-form-item>
<el-button class="next_step" :disabled="disabled" @click="handlerNext"
>重置</el-button
>
</el-form-item>
</el-form>
export default {
data () {
let validateiphone = (rule, value, callback) => {
const mobile_mode = /^1[34578]\d{9}$/;
if (!value) {
return callback(new Error("请输入手机号"));
} else if (!mobile_mode.test(value)) {
return callback(new Error("手机格式不正确"));
}
callback();
};
let validatecode = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入验证码"));
}
callback();
};
var validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入密码'));
}
else {
var passeordreg= /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
if(!passeordreg.test(value)){
callback(new Error('密码必须由8-16位数字和字母密码组成!'))
}
callback();
}
};
var validatecheckPass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入密码'));
} else {
if (this.verification.checkPass !== this.verification.pass) {
callback(new Error('两次密码不一致'));
}
callback();
}
};
return{
verification: {
mobile: "",
smsCode: "",
pass: '',
checkPass: ''
},
rules: {
mobile: [{ validator: validateiphone, trigger: "blur" }],
smsCode: [{ validator: validatecode, trigger: "blur" }],
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatecheckPass, trigger: "blur" }]
},
}
methods: {
handlerNext () {
this.$refs.ruleForm.validate(valid => {
if (valid) {
let query = {
times:sessionStorage.getItem('time'),
message_token:sessionStorage.getItem('check'),
phone: this.verification.mobile,
code: this.verification.smsCode,
password:this.verification.pass,
password2:this.verification.checkPass
};
nextstep(query).then(res => {
console.log(res,'返回数据')
if (res.code == 200) {
console.log(res,'成功后数据')
this.$emit("abcReturn");
}else if(res.code == 201){
this.$message.error(res.message)
}
})
}
})
},
}
}
**父组件页面
**
<div class="wapx">
<div class="content" v-show="proving_show==true">
<div class="proving">
<p>安全验证</p>
<div class="back" @click="back">
<span class="back_icon"></span>
<p class="back_text">返回登录</p>
</div>
</div>
<verification @abcReturn="say()" />
</div>
</div>
</template>
<script>
import verification from '@/components/SecVerification.vue'
export default {
data () {
return {
psd_success: false, //修改密码成功提示
proving_show:true
};
},
methods: {
say () { //安全验证单独逻辑
this.psd_success=true
this.proving_show=false
},
},
components: {
verification,
},
};
</script>