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

フォーム作る時によく探す javascript で正規表現やってバリデーションチェックプログラム
@/utils/validate.js 作成

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\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);
}

# vuejs の computed 内にセット

computed 内の一部ソース


    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
      );
    }

# Bootstrap vue 使った時のフォーム構築


    <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>

js ファイルを import して使える便利!!

2019-10-18
  • javascript
  • vuejs
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
正規表現一覧 よく使う検索・置換のパターン
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
php 開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ