ElementUIのフォーム検証でよく使われる正規表現

文書の種類に応じた選択的検証

data() {
 // 身分証明書の検証
 const checkIDCard = (rule, value, callback) => {
 const IDCardReg = /^\d{6}()?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])||31)\d{3}(\d|X|x)$/
 if (value) {
 if (IDCardReg.test(value)) {
 callback()
 } else {
 callback(new Error('正しくないフォーマットのID番号'))
 }
 } else {
 callback(new Error('ID番号を入力する'))
 }
 }
 // 香港・マカオ許可証の検証
 const checkHKCard = (rule, value, callback) => {
 /**
 * ルール：H/M+ 10ビットまたは6桁
 * サンプル：H
 */
 const HKCardReg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
 if (value) {
 if (HKCardReg.test(value)) {
 callback()
 } else {
 callback(new Error('香港およびマカオのパス番号の書式が正しくない'))
 }
 } else {
 callback(new Error('香港・マカオ旅行許可証番号を入力する'))
 }
 }
 // 台湾旅行許可証の検証
 const checkTWCard = (rule, value, callback) => {
 const TWCardReg1 = /^[0-9]{8}$/;
 const TWCardReg2 = /^[0-9]{10}$/;
 if (value) {
 if (TWCardReg1.test(value) || TWCardReg2.test(value)) {
 callback()
 } else {
 callback(new Error('台湾旅行許可証番号の書式が間違っている'))
 }
 } else {
 callback(new Error('台湾旅行許可証番号を入力する'))
 }
 }
 // パスポート認証
 const checkPassport = (rule, value, callback) => {
 const passportReg1 = /^[a-zA-Z]{5,17}$/;
 const passportReg2 = /^[a-zA-Z0-9]{5,17}$/;
 if (value) {
 if (passportReg1.test(value) || passportReg2.test(value)) {
 callback()
 } else {
 callback(new Error('パスポート番号の書式が正しくない'))
 }
 } else {
 callback(new Error('パスポート番号を入力する'))
 }
 }
 return{
 // ここに正数を入れると、その下のメソッドで正数を簡単に切り替えられる。
 checkIDCard: checkIDCard,
 checkHKCard: checkHKCard,
 checkTWCard: checkTWCard,
 checkPassport: checkPassport,
 }
}
methods: {
 // IDカード、香港・マカオのパスポート、台湾のパスポート、パスポートの検証。
 handleCardChange() {
 if (this.user.credentialType == 1) {
 this.rules.credentialNumber = [{ required: true, validator: this.checkIDCard, trigger: 'change' }]
 } else if (this.user.credentialType == 2) {
 this.rules.credentialNumber = [{ required: true, validator: this.checkHKCard, trigger: 'change' }]
 } else if (this.user.credentialType == 3) {
 this.rules.credentialNumber = [{ required: true, validator: this.checkTWCard, trigger: 'change' }]
 } else if (this.user.credentialType == 4) {
 this.rules.credentialNumber = [{ required: true, validator: this.checkPassport, trigger: 'change' }]
 } else {
 this.rules.credentialNumber = [{ required: true, message: '最初に文書の種類を選択する', trigger: 'change' }]
 }
 }
}

HTMLセクション：

<el-form-item label="文書タイプ:" prop="credentialType" label-width="85px" style="margin-left: -5px; margin-right: 15px">
 <!-- 変更イベントをバインドする>
 <el-select v-model="user.credentialType" class="ext_inp5" @change="handleCardChange">
 <el-option
 v-for="(dict,key) in credentialTypeOptions"
 :label="dict.dictLabel"
 :value="dict.dictValue"
 :key="key"
 />
 </el-select>
</el-form-item>
<el-form-item label=" :" prop="credentialNumber">
 <el-input v-model="user.credentialNumber" class="ext_inp2"></el-input>
</el-form-item>

携帯電話番号

const checkMobile = (rule, value, callback) => {
 if (!value) {
 return callback(new Error('携帯電話番号を空にすることはできない'));
 } else {
 const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
 if (reg.test(value)) {
 callback();
 } else {
 return callback(new Error('正しい携帯電話番号を入力する'));
 }
 }
};

小数を含む正数

// 身長と体重
const heightWeight = (rule, value, callback) => {
 const Reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
 if (value) {
 if (Reg.test(value)) {
 callback();
 } else {
 callback(new Error('正の数を入力する'))
 }
 }
}