# Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  return reg.test(url);
}

export function validLowerCase(str) {
  const reg = /^[a-z]+$/;
  return reg.test(str);
}

export function validUpperCase(str) {
  const reg = /^[A-Z]+$/;
  return reg.test(str);
}

export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/;
  return reg.test(str);
}

export function validKana(text) {
  if (text === null || text === undefined) return null;
  const re = /^[\ｦ-ﾟ\u30a0-\u30ff]+$/;
  return re.test(text);
}

export function validText(text) {
  if (text === null || text === undefined) return null;
  const re = /^[\A-Za-z\Ａ-Ｚａ-ｚ\ｦ-ﾟ\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]+$/;
  return re.test(text);
}

export function validNumber(data, length) {
  if (data === null || data === undefined) return null;
  const re = /^[0-9]+$/;
  return re.test(data) && data.length === length;
}

export function validPostal(data) {
  if (data === null || data === undefined) return null;
  const re = /^[0-9]{3}-?[0-9]{4}$/;
  return re.test(data);
}

export function validTel(data) {
  if (data === null || data === undefined) return null;
  const re = /^[0-9]{3}-?[0-9]{3,4}-?[0-9]{3,4}$/;
  return re.test(data);
}

export function validEmail(email) {
  if (email === null || email === undefined) return null;
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

    checkCustomerCompanyName() {
      return validText(this.customer.company_name);
    },
    checkCustomerCompanyKana() {
      return validKana(this.customer.company_kana);
    },
    checkCustomerFamilyName() {
      return validText(this.customer.family_name);
    },
    checkCustomerPersonalName() {
      return validText(this.customer.personal_name);
    },
    checkCustomerFamilyKana() {
      return validKana(this.customer.family_kana);
    },
    checkCustomerPersonalKana() {
      return validKana(this.customer.personal_kana);
    },
    checkCustomerBirthday1() {
      return validNumber(this.customer.birthday1);
    },
    checkCustomerBirthday2() {
      return validNumber(this.customer.birthday2);
    },
    checkCustomerBirthday3() {
      return validNumber(this.customer.birthday3);
    },
    checkCustomerPostal() {
      return validPostal(this.customer.postal_code);
    },
    checkCustomerPref() {
      return validText(this.customer.pref);
    },
    checkCustomerCity() {
      return (
        this.customer && this.customer.city && this.customer.city.length > 0
      );
    },
    checkCustomerTown() {
      return (
        this.customer && this.customer.town && this.customer.town.length > 0
      );
    },
    checkCustomerCode() {
      return (
        this.customer && this.customer.code && this.customer.code.length > 0
      );
    },
    checkCustomerBuilding() {
      return (
        this.customer &&
        this.customer.building &&
        this.customer.building.length > 0
      );
    },
    checkCustomerTel() {
      return validTel(this.customer.tel);
    },
    checkCustomerEmail() {
      return validEmail(this.customer.mail_address);
    },
    checkCustomerEmail1() {
      return (
        validEmail(this.customer.mail_address) &&
        this.customer.mail_address1 === this.customer.mail_address
      );
    }

    <section class="mx-md-5">
      <h3 class="py-2 font-weight-bold text-22px text-base">お客様情報入力</h3>
      <div v-if="contractType===1" class="bg-light mb-2 px-3">
        <div class="form-group row pt-3">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">会社名</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.company_name"
              :state="checkCustomerCompanyName"
              type="text"
              name="fist_name"
              class="form-control"
              placeholder="株式会社〇〇〇〇"
            />
          </div>
          <div class="col my-auto"></div>
        </div>
        <div class="form-group row pb-3">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">会社名(カタカナ)</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.company_kana"
              :state="checkCustomerCompanyKana"
              type="text"
              name="fist_name_kana"
              class="form-control"
              placeholder="カブシキガイシャ〇〇〇〇"
            />
          </div>
          <div class="col my-auto"></div>
        </div>
      </div>

      <div class="bg-light mb-2 px-3 pt-3 pb-2">
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">契約者名</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.family_name"
              :state="checkCustomerFamilyName"
              type="text"
              name="fist_name"
              class="form-control"
              placeholder="姓"
            />
          </div>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.personal_name"
              :state="checkCustomerPersonalName"
              type="text"
              name="last_name"
              class="form-control"
              placeholder="名"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">契約者名(カタカナ)</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.family_kana"
              :state="checkCustomerFamilyKana"
              type="text"
              name="fist_name_kana"
              class="form-control"
              placeholder="姓(カタカナ)"
            />
          </div>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.personal_kana"
              :state="checkCustomerPersonalKana"
              type="text"
              name="last_name_kana"
              class="form-control"
              placeholder="名(カタカナ)"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">性別</label>
          <b-form-group class="col my-auto">
            <b-form-radio-group
              id="gender"
              v-model="customer.gender"
              :options="gender"
              value-field="id"
              label-field="text"
              name="gender"
              size="lg"
            />
          </b-form-group>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">生年月日</label>
          <div class="col col-sm-4 col-md-2 my-auto d-flex">
            <b-form-input
              v-model="customer.birthday1"
              :state="checkCustomerBirthday1"
              type="text"
              name="year"
              class="form-control mr-1"
              placeholder="年"
              :style="{width: '100px'}"
            />

            <b-form-input
              v-model="customer.birthday2"
              :state="checkCustomerBirthday2"
              type="text"
              name="month"
              class="form-control mr-1"
              placeholder="月"
              :style="{width: '100px'}"
            />

            <b-form-input
              v-model="customer.birthday3"
              :state="checkCustomerBirthday3"
              type="text"
              name="day"
              class="form-control mr-1"
              placeholder="日"
              :style="{width: '100px'}"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">郵便番号</label>
          <div class="col col-sm-6 col-md-2 my-auto">
            <b-form-input
              v-model="customer.postal_code"
              :state="checkCustomerPostal"
              type="text"
              name="postal"
              class="form-control"
              maxlength="8"
              placeholder="郵便番号"
              :style="{width: '120px'}"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">都道府県・市町村</label>
          <div class="col my-auto d-flex">
            <b-form-input
              v-model="customer.pref"
              :state="checkCustomerPref"
              type="text"
              class="form-control mr-1"
              placeholder="都道府県"
              :style="{width: '120px'}"
            />
            <b-form-input
              v-model="customer.city"
              :state="checkCustomerCity"
              type="text"
              class="form-control mr-1"
              placeholder="市"
              :style="{width: '140px'}"
            />
            <b-form-input
              v-model="customer.town"
              :state="checkCustomerTown"
              type="text"
              class="form-control"
              placeholder="町村"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">丁目・番地</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.code"
              :state="checkCustomerCode"
              type="text"
              class="form-control"
              placeholder="丁目・番地"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">マンション名や部屋番号など</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.building"
              :state="checkCustomerBuilding"
              type="text"
              class="form-control"
              placeholder="マンション名や部屋番号など"
            />
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">電話番号</label>
          <div class="col my-auto">
            <b-form-input
              v-model="customer.tel"
              :state="checkCustomerTel"
              type="text"
              name="tel"
              class="form-control"
              placeholder="固定電話または携帯電話、PHSの番号"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-3 col-sm-4 col-form-label text-18px text-gray my-auto">メールアドレス</label>
          <div class="col-9 my-auto">
            <b-form-input
              v-model="customer.mail_address"
              :state="checkCustomerEmail"
              type="text"
              name="mail"
              class="form-control mb-1"
              placeholder="メールアドレス"
            />
            <b-form-input
              v-model="customer.mail_address1"
              :state="checkCustomerEmail1"
              type="text"
              name="checkmail"
              class="form-control"
              placeholder="メールアドレス確認用"
            />
          </div>
        </div>
      </div>
    </section>