<template>
  <div class="addUser">
    <!-- 點選新增使用者對話方塊 -->
      <!-- 新增使用者表單 -->
      <el-form :model="addUser"
               :rules="addUserRules"
               ref="addUser"
               label-width="70px">
        <el-form-item label="郵箱"
                      prop="email">
          <el-input v-model="addUser.email" />
        </el-form-item>
        <el-form-item label="手機"
                      prop="mobile">
          <el-input v-model="addUser.mobile" />
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
  name: "addUser",
  data() {
    var checkEmail = (rule, value, cb) => {
      // 驗證郵箱的正則表示式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (regEmail.test(value)) {
        // 合法的郵箱
        return cb();
      }
      cb(new Error("請輸入合法的郵箱"));
    };

    //驗證手機號的規則;
    var checkMobile = (rule, value, cb) => {
      // 驗證手機號的正則表示式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("請輸入合法的手機號"));
    };
    
    return {
      //新增使用者
      addUser: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      addUserRules: {
        email: [
          {
            required: true,
            message: "請輸入郵箱地址",
            trigger: "blur"
          },
          {
            validator: checkEmail,
            message: "請輸入正確的郵箱地址",
            trigger: "blur"
          }
        ],
        mobile: [
          { required: true, message: "手機號碼不能為空" },
          {
            validator: checkMobile,
            message: "請輸入正確的手機號碼",
            trigger: "blur"
          }
        ]
      }
    };
  },
};
</script>
<style lang="less" scoped></style>