# 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

関連記事

javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
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
開発時によく使うゼロ埋めパディング作業まとめ
vuejs で omisejapan の決済フォーム作成した時のメモ
ReferenceError: location is not defined
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 password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ