vue element select username password 表单验证

<template>
  <div>
    <el-col
      :span="24"
      class="toolbar"
      style="
        padding-bottom: 0px;
        padding-bottom: 0px;
        display: flex;
        justify-content: space-between;
      "
    >
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="newopenuser">开户</el-button>
        </el-form-item>
      </el-form>
      <excelexport></excelexport>
    </el-col>

    <div class="userUpdateMoney" v-if="newOpenUserfrom" :hide-required-asterisk="true">
      <div class="userUpdateForm">
        <h2>人工开户</h2>
        <el-form
          ref="nweOpenUser"
          label-width="90px"
          class="demo-ruleForm"
          :model="nweOpenUser" 
          :rules="rules">
          
          <el-form-item   prop="areaCode" :required="true" label="区号信息">
            <el-select
              v-model="nweOpenUser.areaCode"
              placeholder="请选择区号">
              <el-option
                v-for="item in areaCodes"
                :key="item.value"
                :label="item.name"
                :value="item.areaCode">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item  :required="true" label="用户名"  prop="username" >
            <el-input
              label-width="90px"
              type="id"
              v-model="nweOpenUser.username"
              autocomplete="off"
               placeholder="请输入用户名"
            ></el-input>
          </el-form-item>

          <el-form-item  :required="true" label="用户密码" prop="pwd">
            <el-input
              label-width="90px"
              type="password"
              v-model="nweOpenUser.pwd"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="nweOpenUserSubmit('nweOpenUser')"
              >提交</el-button
            >
            <el-button @click="nweOpenUserreset">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import excelexport from "@/components/export";
import { postUserRequest } from "@/api/api";
export default {
  components: {
    excelexport,
  },
  data() {
    return {
      newOpenUserfrom:false,
      nweOpenUser: {
        areaCode: "",
        pwd: "",
        username: "",
      },
      rules: {
        areaCode: [ {required: true, message: "请选择区号"}],
        username: [ {required: true, message: "用户名不能为空"}],
        pwd: [{required: true,pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,}$/,message: "密码最少8位一个大小写" }],
      },
      areaCodes: [],
    };
  },
  methods: {
    newopenuser() {
    this.newOpenUserfrom=true
    },
    
    // 提交
    nweOpenUserSubmit(nweOpenUser) {
      this.$refs[nweOpenUser].validate((valid) => {
      if (valid) {
        let newUserMessage = JSON.parse(JSON.stringify(this.nweOpenUser))
            newUserMessage.pwd = this.$md5(newUserMessage.pwd)
        postUserRequest(newUserMessage,'/createUser').then((res)=>{
            var data = res.data
            if(data.code ==200){
                   this.newOpenUserfrom=false
                this.$message({
                  message: data.message,
                  type: "message",
                });
            }else{
                this.$message({
                  message: data.message,
                  type: "error",
                });
            }
       
          })
              } 
            });
        
    },
    // 关闭
    nweOpenUserreset() {
    this.newOpenUserfrom=false
    },
  },
  created() {
    this.areaCodes = JSON.parse(sessionStorage.getItem("areaCode_zh"));
    this.areaCodes.forEach((obj, index) => {
      let areacodequ = obj["name"].indexOf("+") + 1;
      obj["areaCode"] = obj["name"].substr(areacodequ);
    });
  },
};
</script>

<style scoped>
.userUpdateMoney {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9;
}
.userUpdateForm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  padding: 30px;
  background: #fff;
  box-shadow: 0px 0px 3px #888;
}
.userUpdateMoney h2 {
  text-align: center;
  font-size: 18px;
}
</style>