页面多次使用elment-ui from的多次使用，造成this.$refs.nameData.validate（）部分起作用的解决办法，在form上添加不同的key来表示form的唯一性，减少连带性

最新推荐文章于 2023-10-19 10:18:21 发布
原创 最新推荐文章于 2023-10-19 10:18:21 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档详细介绍了用户个人信息管理界面的设计与实现，包括姓名、性别、出生年月等基本信息编辑，以及安全中心模块，涉及用户名、登录密码、手机号码、邮箱地址的安全设置与修改流程。 
<!-- Profile.vue -->
<template>
  <div
    class="profile"
    v-loading.fullscreen.lock="settingAllLoad"
  >
    <el-row>
      <el-col>
        <el-card>
          <el-tabs
            v-model="activeName"
            tab-position="left"
            @tab-click="activeClick"
          >
            <el-tab-pane name="first">
              <span slot="label">
                <i class="icon iconfont">&#xe702;</i>
                个人信息
              </span>
              <!-- 个人信息内容 -->
              <div class="userinfo-wrap">
                <el-row :gutter="20">
                  <el-col
                    :md="15"
                    :sm="22"
                    :xs="22"
                  >
                    <el-form
                      label-position="right"
                      :rules="personalRules"
                      label-width="140px"
                      :model="userInfos"
                      ref="userInfos"
                    >
                      <el-form-item
                        label="姓名："
                        prop="userFullname"
                      >
                        <el-input
                          placeholder="请输入姓名"
                          v-model.trim="userInfos.userFullname"
                          :disabled="editable"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="性别："
                        prop="userSex"
                      >
                        <el-select
                          v-model="userInfos.userSex"
                          placeholder="请选择性别"
                          style="width:100%"
                          clearable
                        >
                          <el-option
                            label="男"
                            :value="0"
                          ></el-option>
                          <el-option
                            label="女"
                            :value="1"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="出生年月："
                        prop="userBirthday"
                      >
                        <el-date-picker
                          v-model="userInfos.userBirthday"
                          type="date"
                          placeholder="请选择出生年月"
                          style="width:100%"
                          format="yyyy-MM-dd"
                          value-format="timestamp"
                          :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item
                        label="证件类型："
                        prop="userCertificatetypeDic.id"
                      >
                        <el-select
                          v-model="userInfos.userCertificatetypeDic.id"
                          placeholder="请选择证件类型"
                          style="width:100%"
                          :disabled="editable"
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in idTypeList"
                            :key="index"
                            :label="item.dictionaryName"
                            :value="item.dictionaryCode"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="证件号码："
                        prop="userCertificate"
                      >
                        <el-input
                          v-model.trim="userInfos.userCertificate"
                          minlength="3"
                          maxlength="21"
                          placeholder="请输入证件号码"
                          :disabled="visibleCertificate"
                        ></el-input>
                      </el-form-item>
                      <div class="btn-footer">
                        <el-button
                          type="primary"
                          @click="savePersonal('userInfos')"
                          style="width:100%"
                          v-loading="userSaveLoad"
                        >保存</el-button>
                      </div>
                    </el-form>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label">
                <i class="icon iconfont">&#xe770;</i>
                安全中心
              </span>
              <!-- 安全中心内容 -->
              <div class="safety">
                <el-row>
                  <el-col>
                    <el-row class="item">
                      <el-col :span="20">
                        <i class="icon icon-name"></i>
                        <span class="title">用户名</span>
                        <span
                          class="title"
                          v-if="userInfos.userName"
                        >{{userInfos.userName}}</span>
                      </el-col>
                      <el-col
                        :span="4"
                        class="edit"
                        v-if="!userInfos.userName"
                      >
                        <a @click="editName('userName')">修改</a>
                      </el-col>
                    </el-row>
                    <el-row class="item">
                      <el-col :span="20">
                        <i class="icon icon-password"></i>
                        <span class="title">登录密码</span>
                      </el-col>
                      <el-col
                        :span="4"
                        class="edit"
                      >
                        <a @click="editPassword('password')">修改</a>
                      </el-col>
                    </el-row>
                    <el-row class="item">
                      <el-col :span="20">
                        <i class="icon icon-phone"></i>
                        <span class="title">手机号码</span>
                        <span
                          class="title"
                          v-if="userInfos.isCertification === 0"
                        >已绑定：{{userInfos.userMobile | formateMobile}}</span>
                        <span
                          class="title"
                          v-if="userInfos.isCertification === 1"
                        >实名认证手机：{{userInfos.userMobile | formateMobile}}</span>
                      </el-col>
                      <el-col
                        :span="4"
                        class="edit"
                        v-if="!userInfos.isCertification"
                      >
                        <a @click="editPhone('phone')">修改</a>
                      </el-col>
                    </el-row>
                    <el-row class="item">
                      <el-col :span="20">
                        <i class="icon icon-email"></i>
                        <span class="title">邮箱地址</span>
                        <span
                          class="title"
                          v-if="userInfos.userEmail"
                        >已绑定：{{userInfos.userEmail}}</span>
                      </el-col>
                      <el-col
                        :span="4"
                        class="edit"
                      >
                        <a @click="editEmail('email')">修改</a>
                      </el-col>
                    </el-row>
                    <el-row class="item">
                      <el-col :span="20">
                        <i class="icon icon-wx"></i>
                        <span class="title">微信</span>
                        <!-- <span class="title">已绑定微信</span> -->
                      </el-col>
                      <!-- <el-col :span="4" class="edit">
                        修改
                      </el-col> -->
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <st-upfloat-panel
      :panel="panel"
      @panelClose="closeEvent"
      class="userName"
    >
      <!-- 修改用户名 -->
      <div v-if="name === 'userName'">
        <el-row>
          <el-col>
            <el-form
              key='userName'
              :model="nameData"
              label-position="right"
              :rules="nameRules"
              ref="nameData"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="用户名："
                prop="userName"
              >
                <el-input
                  v-model.trim="nameData.userName"
                  placeholder="请输入用户名"
                  maxlength="50"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-row
                  :gutter="20"
                  :span="24"
                >
                  <el-col :span="12">
                    <el-button
                      type="primary"
                      class="btn"
                      @click="saveName('nameData')"
                    >确认</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="btn"
                      @click="cancelName()"
                    >取消</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 修改登录密码 -->
      <div v-if="name === 'password'">
        <el-row justify="center">
          <el-col>
            <el-form
              key="password"
              :model="passwordData"
              label-position="right"
              :rules="passwordRules"
              ref="passwordData"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="当前密码："
                prop="password"
              >
                <el-input
                  v-model="passwordData.password"
                  minlength="8"
                  maxlength="20"
                  type="password"
                  placeholder="请输入当前密码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="新密码："
                prop="newPassword"
              >
                <el-input
                  v-model="passwordData.newPassword"
                  minlength="8"
                  maxlength="20"
                  type="password"
                  placeholder="请输入新密码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="确认密码："
                prop="cofirmPassword"
              >
                <el-input
                  v-model="passwordData.cofirmPassword"
                  minlength="8"
                  maxlength="20"
                  type="password"
                  placeholder="请再次输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-row
                  :gutter="20"
                  :span="24"
                >
                  <el-col :span="12">
                    <el-button
                      type="primary"
                      class="btn"
                      @click="savePassword('passwordData')"
                    >确认</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="btn"
                      @click="cancelPassword()"
                    >取消</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 修改手机号码 -->
      <div v-if="name === 'phone'">
        <el-row>
          <el-col>
            <el-form
              key="phone"
              :model="phoneData"
              label-position="right"
              :rules="phoneRules"
              ref="phoneData"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="手机号码："
                prop="phone"
              >
                <el-input
                  v-model.trim="phoneData.phone"
                  maxlength="11"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="code" label="验证码：">
                <el-col :span="14">
                  <el-input v-model.trim="phoneData.code" maxlength="4" placeholder="请输入短信验证码"></el-input>
                </el-col>
                <el-col class="line" :span="1" >&nbsp;</el-col>
                <el-col :span="9">
                  <getCode :childForm="phoneData" @updateForm="change"></getCode>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-row
                  :gutter="20"
                  :span="24"
                >
                  <el-col :span="12">
                    <el-button
                      type="primary"
                      class="btn"
                      @click="savePhone('phoneData')"
                    >确认</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="btn"
                      @click="cancelPhone()"
                    >取消</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 修改邮箱地址 -->
      <div v-if="name === 'email'">
        <el-row>
          <el-col>
            <el-form
              key="email"
              :model="emailData"
              label-position="right"
              :rules="emailRules"
              ref="emailData"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="新邮箱地址："
                prop="address"
              >
                <el-input
                  :maxlength="50"
                  v-model.trim="emailData.address"
                  placeholder="请输入邮箱地址"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-row
                  :span="24"
                  :gutter="20"
                >
                  <el-col :span="12">
                    <el-button
                      type="primary"
                      class="btn"
                      @click="saveEmail('emailData')"
                    >确认</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      class="btn"
                      @click="cancelEmail()"
                    >取消</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </st-upfloat-panel>
  </div>
</template>

<script>
import gql from 'graphql-tag'
import { getErrorByCode } from '@/utils/errors'
import StUpfloatPanel from '@/components/stupfloatpanel/StUpfloatPanel'
import Code from '@/components/code/Code'
import {
  count, // 姓名
  validateUserName, // 用户名
  validateIdcard, // 身份证
  validateEmail, // 邮箱
  validatePassword, // 密码
  validatePassCheckLegal, // 确认密码,
  validateAuthCode, // 输入验证码
  validatePhoneUser // 手机号
} from '@/utils/validate'
export default {
  components: {
    StUpfloatPanel,
    getCode: Code
  },
  data () {
    const valiDateCode = (rule, value, callback) => {
      // 证件号
      if (this.userInfos.userCertificatetypeDic.id === 'd82f57aaddb611e8b6a66c0b84d10001') {
        if (!value) {
          callback(new Error('请输入证件号码'))
        } else if (!validateIdcard(value)) {
          callback(new Error('请输入正确的身份证号'))
        } else {
          callback()
        }
      } else {
        if (!value) {
          callback(new Error('请输入证件号码'))
        } else {
          callback()
        }
      }
    }
    // 姓名的判断
    const checkUserFullName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入姓名'))
      } else if (count(value) > 50) {
        callback(new Error('请输入正确的姓名'))
      } else {
        callback()
      }
    }
    // 邮箱的判断
    const checkEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入邮箱地址'))
      } else if (!validateEmail(value)) {
        callback(new Error('请输入正确的邮箱地址'))
      } else {
        callback()
      }
    }
    // 密码验证输入密码
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入当前密码'))
      } else if (!validatePassword(value)) {
        callback(new Error('请输入正确的密码(8-20位字符，必须由数字、字母组成)'))
      } else {
        callback()
      }
    }
    // 密码验证新密码
    const checkNewPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入当前密码'))
      } else if (!validatePassword(value)) {
        callback(new Error('请输入正确的密码(8-20位字符，必须由数字、字母组成)'))
      } else {
        callback()
      }
    }
    // 确认密码再次验证
    const passCheckUpdate = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (!validatePassCheckLegal(value, this.passwordData.newPassword)) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    // 手机号码验证
    const phoneCheck = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else if (!validatePhoneUser(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    // 验证码验证
    const codeCheck = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入短信验证码'))
      } else if (!validateAuthCode(value)) {
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }
    // 用户名验证
    const checkUserName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else if (!validateUserName(value)) {
        callback(new Error('用户名必须以字母开头，数字、字母、_组合'))
      } else {
        callback()
      }
    }
    return {
      // 设置全局loading
      settingAllLoad: false,
      // 设置保存loading
      userSaveLoad: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      // areaList: [], // 区域
      idTypeList: [], // 证件类型
      name: '',
      activeName: 'first',
      editable: false,
      // 修改用户名
      nameData: {
        userName: ''
      },
      // 修改密码
      passwordData: {
        password: '',
        newPassword: '',
        cofirmPassword: ''
      },
      // 修改手机号
      phoneData: {
        phone: '',
        code: ''
      },
      // 修改邮箱
      emailData: {
        address: '',
        verificationCode: ''
      },
      // panel设置
      panel: {
        show: false,
        title: '',
        // 表单操作结果显示 type:(-1,0,1),msg
        result: {
          type: 0,
          msg: ''
        }
      },
      userInfos: {
        id: '',
        isCertification: 0,
        userFullname: '',
        userName: '',
        userCertificatetypeDic: {
          id: ''
        },
        userCertificate: '',
        userSex: '',
        userBirthday: '',
        userEmail: '',
        userMobile: ''
      },
      personalRules: {
        userFullname: [
          { required: true, validator: checkUserFullName, trigger: 'blur' }
        ],
        userSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        userBirthday: [
          { type: 'date', required: true, message: '请选择出生年月', trigger: 'change' }
        ],
        userCertificate: [
          { required: true, validator: valiDateCode, trigger: 'blur' }
        ],
        userCertificatetypeDic: {
          id: [{ required: true, message: '请选择证件类型', trigger: 'change' }]
        }
      },
      nameRules: {
        userName: [
          { required: true, validator: checkUserName, trigger: 'blur' }
        ]
      },
      passwordRules: {
        password: [
          { validator: checkPassword, trigger: 'blur' }
        ],
        newPassword: [
          { validator: checkNewPassword, trigger: 'blur' }
        ],
        cofirmPassword: [
          { validator: passCheckUpdate, trigger: 'blur' }
        ]
      },
      phoneRules: {
        phone: [{ required: true, validator: phoneCheck, trigger: 'blur' }],
        code: [{ required: true, validator: codeCheck, trigger: 'blur' }]
      },
      emailRules: {
        address: [
          {
            required: true,
            validator: checkEmail,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  filters: {
    formateMobile (value) {
      return value.substr(0, 3) + '****' + value.substr(-4, 4)
    },
    formateEmail (value) {
      return value.substr(0, 3) + '**' + '@' + value.substr(-5, 5)
    }
  },
  computed: {
    visibleCertificate () {
      if (this.userInfos.userCertificatetypeDic && this.userInfos.userCertificatetypeDic.id) {
        return (
          !this.userInfos.userCertificatetypeDic.id || this.userInfos.isCertification === 1
        )
      }
    }
  },
  mounted () {
    this.user()
    this.dictionary()
  },
  methods: {
    // 获取区域信息
    dictionary () {
      this.$apollo
        .query({
          query: gql`
            query dictionaries($type: String!, $code: String!) {
              dictionaries(type: $type, code: $code) {
                dictionaryCode: id
                dictionaryName: dictionary_name
              }
            }
          `,
          client: 'dictionary',
          fetchPolicy: 'network-only',
          variables: {
            type: 'user_id_type',
            code: 'user_id_type'
          }
        })
        .then(res => {
          if (res.data.dictionaries) {
            this.idTypeList = res.data.dictionaries
          }
        })
        .catch(err => {
          this.$message.error(getErrorByCode(err))
        })
    },
    // 获取用户信息
    user () {
      // 加载全局loading
      this.settingAllLoad = true
      this.$apollo
        .query({
          query: gql`
            query user($accountCode: String) {
              user(accountCode: $accountCode) {
                  id
                  userFullname
                  userName
                  userCertificate
                  userCertificatetypeDic{
                    id
                    dictionaryName
                  }
                  userSex
                  userBirthday
                  isCertification
                  userMobile
                  userEmail
              }
            }
          `,
          client: 'center',
          fetchPolicy: 'network-only'
        })
        .then(res => {
          // 取消全局loading
          this.settingAllLoad = false
          if (res.data.user) {
            let data = JSON.parse(JSON.stringify(res.data.user))
            if (!data.userCertificatetypeDic) {
              data.userCertificatetypeDic = {}
              this.$set(data.userCertificatetypeDic, 'id', '')
            }
            this.userInfos = data
            if (this.userInfos.isCertification) {
              this.editable = true
            } else {
              this.editable = false
            }
          }
        }).catch(err => {
          // 取消全局loading
          this.settingAllLoad = false
          this.$message.error(getErrorByCode(err))
        })
    },
    saveUser (id, user) {
      // 设置保存loading
      this.userSaveLoad = true
      this.$apollo
        .mutate({
          mutation: gql`
            mutation saveUser($id: ID,$user: UserInput) {
              saveUser(id: $id,user: $user) {
                userBirthday
                userCertificate
                userCertificatetypeDic{
                  id
                  dictionaryName
                }
                userFullname
                userSex
              }
            }
          `,
          client: 'center',
          variables: {
            id: id,
            user: user
          }
        })
        .then(res => {
          // 设置保存loading
          this.userSaveLoad = false
          if (res.data.saveUser) {
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            // 移除表单项的校验结果
            this.$refs.userInfos.clearValidate()
            this.user()
          }
        }).catch(err => {
          // 设置保存loading
          this.userSaveLoad = false
          this.$message.error(getErrorByCode(err))
        })
    },
    modifyAccount (ref, data) {
      this.$apollo
        .mutate({
          mutation: gql`
            mutation modifyAccount($userName:String,$accountEmail:AccountEmailInput,$accountMobile:AccountMobileInput) {
              modifyAccount(userName:$userName,accountEmail:$accountEmail,accountMobile: $accountMobile)
            }
          `,
          client: 'center',
          variables: {
            userName: data.userName || '',
            accountEmail: {
              userEmail: data.userEmail || '',
              verificationCode: data.verificationCode || '1234'
            },
            accountMobile: {
              verificationCode: data.verificationCode || '1234',
              userMobile: data.userMobile || ''
            }
          }
        }).then(res => {
          if (res.data.modifyAccount) {
            this.panel.result.type = 1
            this.panel.show = true
            this.user()
            // this.resetClearForm(ref)
          }
        }).catch(err => {
          this.$message.error(getErrorByCode(err))
        })
    },
    // 个人信息保存
    savePersonal (userInfos) {
      this.$refs.userInfos.validate(valid => {
        if (valid) {
          this.hidePanel()
          const form = {
            userFullname: this.userInfos.userFullname,
            userCertificate: this.userInfos.userCertificate,
            userCertificatetype: this.userInfos.userCertificatetypeDic.id,
            userSex: this.userInfos.userSex,
            userBirthday: this.userInfos.userBirthday
          }
          this.saveUser(this.userInfos.id, form)
        } else {
          return false
        }
      })
    },
    activeClick (tab, event) {
      if (tab.name === 'first') {
        this.user()
      }
      this.$refs.userInfos.clearValidate()
    },
    // 关闭弹框
    closeEvent () {
      if (this.name === 'userName') {
        // this.$nextTick(() => {
        //   // this.$refs.nameData && this.$refs.nameData.resetFields()
        //   this.nameData.userName = null
        //   this.$refs.nameData && this.$refs.nameData.clearValidate()
        // })
        this.nameData.userName = null
        this.$refs.nameData && this.$refs.nameData.clearValidate()
      } else if (this.name === 'password') {
        // this.$nextTick(() => {
        //   // this.$refs.passwordData && this.$refs.passwordData.resetFields()
        //   this.passwordData.password = null
        //   this.passwordData.newPassword = null
        //   this.passwordData.cofirmPassword = null
        //   this.$refs.passwordData && this.$refs.passwordData.clearValidate()
        // })
        this.passwordData.password = null
        this.passwordData.newPassword = null
        this.passwordData.cofirmPassword = null
        this.$refs.passwordData && this.$refs.passwordData.clearValidate()
      } else if (this.name === 'phone') {
        // this.$nextTick(() => {
        //   // this.$refs.phoneData && this.$refs.phoneData.resetFields()
        //   this.phoneData.phone = null
        //   this.phoneData.code = null
        //   this.$refs.phoneData && this.$refs.phoneData.clearValidate()
        // })
        this.phoneData.phone = null
        this.phoneData.code = null
        this.$refs.phoneData && this.$refs.phoneData.clearValidate()
      } else if (this.name === 'email') {
        // this.$nextTick(() => {
        //   // this.$refs.emailData && this.$refs.emailData.resetFields()
        //   this.emailData.address = null
        //   this.$refs.emailData && this.$refs.emailData.clearValidate()
        // })
        this.emailData.address = null
        this.$refs.emailData && this.$refs.emailData.clearValidate()
      }
      this.panel.result.type = 0
      this.panel.show = false
    },
    showPanel () {
      this.panel.show = true
    },
    hidePanel () {
      this.panel.show = false
    },
    cancelName () {
      this.closeEvent()
    },
    saveName (nameData) {
      this.$refs.nameData.validate((valid) => {
        if (valid) {
          this.modifyAccount(nameData, {
            userName: this.nameData.userName,
            userEmail: '',
            verificationCode: '1111',
            userMobile: ''
          })
        } else {
          return false
        }
      })
    },
    editName (name) {
      this.name = name
      this.showPanel()
      this.panel = Object.assign(this.panel, {
        show: true,
        title: '修改用户名',
        result: {
          type: 0,
          msg: '您已成功修改用户名'
        }
      })
    },
    editPassword (name) {
      this.name = name
      this.showPanel()
      this.panel = Object.assign(this.panel, {
        show: true,
        title: '修改登录密码',
        result: {
          type: 0,
          msg: '您已成功修改密码'
        }
      })
    },
    savePassword (passwordData) {
      this.$refs.passwordData.validate((valid) => {
        if (valid) {
          this.$apollo
            .mutate({
              mutation: gql`
                mutation modifyPassword($password: String,$newPassword: String) {
                  modifyPassword(password: $password,newPassword: $newPassword)
                }
              `,
              client: 'center',
              variables: {
                password: this.passwordData.password,
                newPassword: this.passwordData.newPassword
              }
            })
            .then(res => {
              if (res.data.modifyPassword) {
                this.panel.result.type = 1
                this.panel.show = true
                this.user()
                // this.resetClearForm(passwordData)
              }
            }).catch(err => {
              this.$message.error(getErrorByCode(err))
            })
        } else {
          return false
        }
      })
    },
    resetClearForm (refName) {
      // this.$refs[refName] && this.$refs[refName].resetFields()
      this.$refs.refName && this.$refs.refName.clearValidate()
    },
    cancelPassword () {
      this.closeEvent()
    },
    editPhone (name) {
      this.name = name
      this.showPanel()
      this.panel = Object.assign(this.panel, {
        show: true,
        title: '修改手机号码',
        result: {
          type: 0,
          msg: '您已成功修改手机号码'
        }
      })
    },
    savePhone (phoneData) {
      this.$refs.phoneData.validate((valid) => {
        if (valid) {
          this.modifyAccount(phoneData, {
            userName: '',
            userEmail: '',
            verificationCode: this.phoneData.code,
            userMobile: this.phoneData.phone
          })
        } else {
          return false
        }
      })
    },
    cancelPhone () {
      this.closeEvent()
    },
    editEmail (name) {
      this.name = name
      this.showPanel()
      this.panel = Object.assign(this.panel, {
        show: true,
        title: '修改邮箱地址',
        result: {
          type: 0,
          msg: '您已成功修改邮箱地址'
        }
      })
    },
    saveEmail (emailData) {
      this.$refs.emailData.validate((valid) => {
        if (valid) {
          this.modifyAccount(emailData, {
            userName: '',
            userEmail: this.emailData.address,
            verificationCode: this.emailData.verificationCode || '1111',
            userMobile: ''
          })
        } else {
          return false
        }
      })
    },
    cancelEmail () {
      this.closeEvent()
    },
    // 验证码返回值
    change (msg) {
      // 接收子组件的返回值
      const code = msg.data.getMobileVerificationCode.code
      if (code === 200) {
      } else {
        this.$message.error(getErrorByCode(code))
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.profile
  .btn-footer
    margin-left 140px
  .safety
    margin-left 40px
    .edit
      font-size 14px
      text-align right
      color #1989fa
    .item
      height 80px
      line-height 80px
      border-bottom 1px solid #dcdfe6
    .icon
      width 40px
      height 40px
      display inline-block
      position relative
      top 13px
    .icon-name
      background-image url('./images/icon-name.svg')
    .icon-password
      background-image url('./images/icon-password.svg')
    .icon-phone
      background-image url('./images/icon-phone.svg')
    .icon-email
      background-image url('./images/icon-email.svg')
    .icon-wx
      background-image url('./images/icon-wx.svg')
    .title
      display inline-block
      font-size 18px
      color #303133
      margin-left 20px
  .userinfo-wrap
    margin 20px 0
    margin-left 50px
  .userName
    .btn
      width 100%
</style>

 

element el-form 表单验证单个字段 this.$refs.form.validateField
G佳伟
05-22 4922
element el-form 表单校验单个字段 this.$refs.form.validateField 单独校验 ，element ui 表单验证，element ui 单独字段表单验证
vue 校验规则 防止多次点击弹窗重新触发
林夕
01-08 640
【代码】vue 校验规则 防止多次点击弹窗重新触发。
Vue中实现避免按钮多次点击造成发送多次重复请求
qq_32755875的博客
09-03 2781
store文件中设置一个变量，全局管理按钮的禁用和解除禁用，方便组件之间的通信 select.vue发送表单组件，表单没有填写完整时也要将按钮禁用解除 <Button type="primary" :disabled="this.$store.state.isDisable" @click="filterBtn('form')" icon="ios-search">筛选</Button> methods: { filterBtn (name) { this.
element form表单validateField对部分表单字段进行校验时触发多次校验
qq_41819868的博客
09-27 4720
element form表单 validateField 对部分表单校验的时候会触发多次
组件element的form表单局部验证用法
lgp199881的博客
02-04 1798
form表单局部验证
this.$refs[‘dataAddForm‘].validate((valid) =＞
weixin_47384925的博客
12-27 964
表单校验 this.$refs[‘dataAddForm‘].validate((valid) =＞_IT__LS的博客-优快云博客 需要注意的是在验证条件的时候都需要 return 否则没有效果
vue.js element-ui validate中代码不执行问题解决方法
10-18
如果在每个验证分支中都未调用 `callback`，或者没有正确地传递验证结果（通常是成功或错误），那么验证流程可能就会中断，导致 `this.$refs[formName].validate()` 方法不会继续执行。 为了解决这个问题，我们需要...
精选资源
element-ui.rar element-ui核心库压缩包
12-20
this.$refs[refName].validate((valid) => { if (valid) { alert('表单验证通过'); } else { alert('表单验证失败，请检查输入'); } }); } } }; ``` 这段代码展示了如何创建一个包含两个输入字段的表单，...
前端报错 this.$refs[formNAme].validate is not funtion
最新发布
10-01
我们正在处理一个前端问题，具体是关于Element UI表单校验时报错：`this.$refs[formName].validate is not a function`。 根据引用[1]和[2]，这个错误通常是因为`this.$refs[formName]`实际上是一个数组，而不是单个...
vue element ui validate 主动触发错误提示操作
01-18
elementUI使用了async-validator...补充知识：element-ui 打开页面触发校验问题 如果你设置了关闭弹出页就resetFields（），此时打开页面仍然触发校验效果，一般是下拉框和时间选择导致的，解决办法就是更改校验规则rul
element表单校验的一个坑 this.$refs[xxx].validate is not a function
Sensation_cyq的博客
11-19 1663
element表单校验的一个坑 this.$refs[xxx].validate is not a function this.$refs[data][0].validate((valid) => 这个[0]需要加上
vue里碰到 $refs 的问题
weixin_30894583的博客
07-08 283
记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中，遇到一个列表页，根据id能进入详情页（动态匹配路由），详情页是单独的一个组件，在这个详情的组件里，我想获取内容给你区域的高度，以此来判断对底部按钮显示的位置，但是在ref的时候，就是获取不到该标签，在mounted钩子函数里打印 this.$refs，也能看到这个值，但就就是点不出来（this.$refs...
部分校验导致请求连续执行两次的问题处理
jquery_learn的博客
10-19 463
部分校验导致请求连续执行两次的问题处理
同一页面多次引用同一组件
Swallow的博客
05-18 2908
同一页面多次引用同一组件实现日期默认值 需求：在一个页面内引入两次form表单组件，在tab切换时，tab1默认近一周的日期，tab2默认近一个月的日期 子组件： <template> <div> <el-form :inline="true" :model="form" class="demo-form-inline"> <el-form-item> <el-select v-model="form.time"&
关于form表单提交validate验证报错总结
喜东东的博客
08-05 1万+
在开发时使用this.$refs.form.validate();会有几种情况报错： this.$refs.form.validate((valid) => {不进入这个函数}) 报没有validate方法 遇到以上问题从以下几个地方检查： 1.对于第一个bug，检查写的校验是否写正确了，能够正常callback出来，不然校验就走不出来当然就进入不到那个函数了； 2.对于第二个bug： a.检查html中是否给form定义了ref b.检查是否改组件是否只存在一个你定义...
antd form 表单某一个字段校验唯一性，排除重复
qq_37233023的博客
07-23 3856
需求场景：在一个表格中，code唯一，即新增或者编辑时，需要校验code不可重复 <Form.Item name="typeCode" label="详细类型" rules={[{required: false, message: '请输入详细类型'},
FormItem实现循环验证
ct5211314的博客
08-13 938
循环代码，:prop="'items[' + i + '].value'" :rules="ruleValidate.value" 用于循环判断。在from组件中有时候我们需要将FormItem实现循环验证。
antd的form表单自定义验证validator的注意事项
热门推荐
Lofan 的博客
02-04 2万+
validator 这个验证在if-else里，每个判断情况都要加callback，不然会导致所有rule验证失效，页面上没填都不提示。 比如这样： <Form.Item label="模式"> {getFieldDecorator("p_mode", { rules: [ { required: true, message: "请选...
element form的内嵌属性validate，form表单提交时判断规则
weixin_42206375的博客
04-21 2515
//element form ,通过this.$refs.form.validate打印出来的element源码 validate: function validate(callback) { var _this2 = this; if (!this.model) { console.warn('[Element Warn][Form]model is required for validate to work!'); return; .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值