# 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\Ａ-Ｚａ-ｚ\ｦ-ﾟ\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 して使える便利！！