Skip to content

B
BCDH-APP
Commit 630ea071 authored by 王李辉's avatar 王李辉
Browse files
Options

修改密码加入低中高强度校验

parent 880d1037
Pipeline #8716 passed with stage
    in 5 minutes and 21 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 191 additions and 103 deletions
    src/views/my/resetPas.vue
    View file @ 630ea071
    <template> <template>
    <div> <div>
    <!-- 修改密码页面 --> <!-- 修改密码页面 -->
    <!-- 头部标签 --> <!-- 头部标签 -->
    <LHeader :text="$route.meta.title"></LHeader> <LHeader :text="$route.meta.title"></LHeader>
    <van-form <van-form
    @submit="onSubmit" @submit="onSubmit"
    :scroll-to-error="true" :scroll-to-error="true"
    :show-error="false" :show-error="false"
    validate-trigger="onSubmit" validate-trigger="onSubmit"
    > >
    <van-field <van-field
    v-model="form.oldPassword" v-model="form.oldPassword"
    required required
    type="text" type="text"
    name="oldPassword" name="oldPassword"
    label="旧密码" label="旧密码"
    placeholder="请输入旧密码" placeholder="请输入旧密码"
    :rules="[{ required: true, message: '请填写密码' }]" :rules="[{ required: true, message: '请填写密码' }]"
    /> />
    <van-field <van-field
    required required
    v-model="form.newPassword" v-model="form.newPassword"
    type="password" type="password"
    name="newPassword" name="newPassword"
    label="新密码" label="新密码"
    placeholder="请输入新密码" @input="checkPassword()"
    :rules="[ placeholder="请输入新密码"
    { required: true, message: '请填写密码' }, :rules="[
    { { required: true, message: '请填写密码' },
    message: '密码必须大于6个字符小于20个字符', {
    validator: (val) => { message: '密码必须大于6个字符小于20个字符',
    return val['length'] >= 6 && val['length'] < 20; validator: (val) => {
    }, return val['length'] >= 6 && val['length'] < 20;
    }, },
    ]" },
    /> ]"
    <van-field />
    required <!-- 密码等级提示 -->
    v-model="form.confirm" <van-cell-group>
    type="password" <div class="intensity">
    name="confirm" <div style="width: 8.2em; margin-right: 0.32rem;"></div>
    label="再次输入" <div>
    placeholder="再次输入新密码" <div class="pass-level">
    :rules="[ <span class="psdText">密码强度</span>
    { validator, required: true, message: '二次密码输入不一致' }, <span class="line" :class="[level.includes('low') ? 'low' : '']"></span>
    { <span class="line" :class="[level.includes('middle') ? 'middle' : '']" ></span>
    message: '密码必须大于等于6个字符小于20个字符', <span class="line" :class="[level.includes('high') ? 'high' : '']" ></span>
    validator: (val) => {
    return val['length'] >= 6 && val['length'] < 20;
    },
    },
    ]"
    />
    <div style="margin: 16px">
    <van-button round block type="info" native-type="submit"
    >提交
    </van-button>
    </div> </div>
    </van-form> </div>
    </div> </div>
    </van-cell-group>
    <van-field
    required
    v-model="form.confirm"
    type="password"
    name="confirm"
    label="再次输入"
    placeholder="再次输入新密码"
    :rules="[
    { validator, required: true, message: '二次密码输入不一致' },
    {
    message: '密码必须大于等于6个字符小于20个字符',
    validator: (val) => {
    return val['length'] >= 6 && val['length'] < 20;
    },
    },
    ]"
    />
    <div style="margin: 16px">
    <van-button round block type="info" native-type="submit"
    >提交
    </van-button>
    </div>
    </van-form>
    </div>
    </template> </template>
    <script> <script>
    ...@@ -69,54 +84,127 @@ import { getFun, postFun } from "@/service/table.js"; ...@@ -69,54 +84,127 @@ import { getFun, postFun } from "@/service/table.js";
    import { getUserInfo } from "@/utils/userInfo"; import { getUserInfo } from "@/utils/userInfo";
    import { removeToken } from "@/utils/auth"; // get token from cookie import { removeToken } from "@/utils/auth"; // get token from cookie
    export default { export default {
    components: { components: {
    LHeader, LHeader,
    },
    data() {
    return {
    form: {
    oldPassword: "",
    newPassword: "",
    confirm: "",
    },
    level : []
    };
    },
    mounted() {
    console.log(getUserInfo());
    },
    methods: {
    validator(val) {
    return this.form.newPassword == val;
    }, },
    data() { onSubmit(val) {
    return { this.$toast.loading({
    form: { message: "请求中...",
    oldPassword: "", forbidClick: true,
    newPassword: "", loadingType: "spinner",
    confirm: "", duration: 0,
    }, });
    }; postFun("/mobile/resetPwd", this.obj2formdata(val)).then((data) => {
    if (data.code == 0) {
    this.$toast.clear();
    this.$toast.success("密码修改成功!");
    this.$router.back();
    }
    });
    }, },
    mounted() { obj2formdata(data) {
    console.log(getUserInfo()); console.log(data, "fasfasdfsd");
    let fd = new FormData();
    for (let k in data) {
    if (data[k]) {
    fd.append(k, data[k]);
    }
    }
    return fd;
    }, },
    methods: {
    validator(val) { // 密码等级校验
    return this.form.newPassword == val; checkPassword() {
    }, this.level = [];
    onSubmit(val) { // 校验是数字
    this.$toast.loading({ const regex1 = /^\d+$/;
    message: "请求中...", // 校验字母
    forbidClick: true, const regex2 = /^[A-Za-z]+$/;
    loadingType: "spinner", // 校验符号
    duration: 0, const regex3 =
    }); /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
    postFun("/mobile/resetPwd", this.obj2formdata(val))
    .then((data) => { if (regex1.test(this.form.newPassword)) {
    if (data.code == 0) { this.level.push("low");
    this.$toast.clear(); } else if (regex2.test(this.form.newPassword)) {
    this.$toast.success('密码修改成功!'); this.level.push("low");
    this.$router.back() } else if (regex3.test(this.form.newPassword)) {
    } this.level.push("low");
    }) } else if (/^[A-Za-z\d]+$/.test(this.form.newPassword)) {
    }, this.level.push("low");
    obj2formdata(data) { this.level.push("middle");
    console.log(data, "fasfasdfsd"); } else if (
    let fd = new FormData(); /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
    for (let k in data) { this.form.newPassword
    if (data[k]) { )
    fd.append(k, data[k]); ) {
    } this.level.push("low");
    } this.level.push("middle");
    return fd; } else if (
    }, /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
    this.form.newPassword
    )
    ) {
    this.level.push("low");
    this.level.push("middle");
    } else if (
    /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
    this.form.newPassword
    )
    ) {
    this.level.push("low");
    this.level.push("middle");
    this.level.push("high");
    }
    }, },
    },
    }; };
    </script> </script>
    <style> <style lang="less" scoped>
    .intensity {
    display: flex;
    padding: 0.26667rem 0.42667rem;
    line-height: 0.64rem;
    .psdText {
    font-size: 14px;
    margin-right: 10px;
    }
    .line {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;
    }
    .low {
    background: #f4664a;
    }
    .middle {
    background: #ffb700;
    }
    .high {
    background: #2cbb79;
    }
    }
    </style> </style>
    \ No newline at end of file
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment