データのフォーマット検証について(フォームに限定されません)
3640 ワード
ネット上のデータ検証については主にフォームベースで、しかもJQと結合することが多く、個人的にはあまり好きではありません.最近はvueを書く項目が多く、vueベースのデータ検証プラグインも少なくありませんが、vueがなくても使えません.結合性が強すぎて、自分はカスタマイズ性の高いスタイルが好きです.以下は自分でカプセル化したコードで、まだ完全なプラグインではありませんが、もう使えます.
目的は次のとおりです. JQやVue、Recatなどに依存しない には、必須、数値、メールボックスフォーマットなどの の一般的な検証タイプが組み込まれています.間違った文字にはテンプレートがあり、カスタマイズされた もあります.エラーの処理結果 をカスタマイズ可能カスタム'正規表現 最も重要なのは、スタイルや他のファイル を導入する必要がなく、簡単で使いやすいことです.
現在の完了状況:は上記の基本要求 に達した.カスタム正規表現 を完了組み込み検証フォーマットの完了:必須--requiredメール--Email携帯電話--phoneパスワード--password 使用方法:
使用するファイルにverificationを導入する.jsファイル
注意:埋め込みタイプとカスタム正規表現の両方を欠落させることはできません.2つの方法で1を選択する必要があります.つまり、RegularとTypeというパラメータ2を選択する必要があります.
コアコード:verification.js
目的は次のとおりです.
現在の完了状況:
使用するファイルにverificationを導入する.jsファイル
import {getData} from '@/libs/verification'
let T=getData( ,{
msg:' ',
Regular:/^[0-9]*$/, //
callback:function (errMsg) { //
console.log(errMsg)
}
})
let F=getData( ,{
Type:['required','password'],, //
callback:function (errMsg) { //
console.log(errMsg)
}
})
// true/false
注意:埋め込みタイプとカスタム正規表現の両方を欠落させることはできません.2つの方法で1を選択する必要があります.つまり、RegularとTypeというパラメータ2を選択する必要があります.
コアコード:verification.js
/**
* Data:
* config:
* */
export function verify(Data = null, config = {}) {
if (Data == null) {
throw new Error(' ');
return false
}
if (!(config.Type || null) && !config.Regular) {
throw new Error(' Type Regular ');
return false
}
//
if (config.Type) {
return ownType(Data, config)
}
//
if (config.Regular) {
if (!config.Regular.test(Data)) {
showError(config.msg || ' ', config.callback)
return false
}
}
return true// false, true
}
/* */
function ownType(Data, config) {
for (let item of config.Type) {
if (ownTypeList[item]) {
if (!ownTypeList[item](Data, config)) {
return false
break;
}
} else {
throw new Error(item + ' ');
return false
break;
}
}
// , , false
}
/* */
function showError(errMsg, callback) {
if (!callback) {
console.log(errMsg)
} else {
callback(errMsg);
}
}
let ownTypeList = {
/* - */
required: function (Data, config) {
let errMsg = ' ';
let regu = "^[ ]+$";
let re = new RegExp(regu);
if (re.test(Data)) {
showError(' ', config.callback)
return false
}
if (Data === '' || Data === undefined || Data === null) {
showError(errMsg, config.callback)
return false
}
return true
},
/* - */
Email: function (Data, config) {
let errMsg = ' '
let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (pattern.test(Data)) {
return true
} else {
showError(errMsg, config.callback)
return false
}
},
/* - */
phone: function (Data, config) {
let errMsg = ' '
let pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if (pattern.test(Data)) {
return true
} else {
showError(errMsg, config.callback)
return false
}
},
password: function (Data, config) {
let errMsg = ' : , 6~18 , 、 '
let pattern = /^[a-zA-Z]\w{5,17}$/;
if (pattern.test(Data)) {
return true
} else {
showError(errMsg, config.callback)
return false
}
},
}