入力ボックスの固定入力の価値形式(金額、特殊文字)を解決するための正規表現
2022-01-15 04:34:42
入力を書き込む際、以下のような状況がよく起こります。
特定の入力しかできない。栗:数字のみ入力可能、文字(大文字、小文字)のみ入力可能、特定の定型文のみ入力可能。栗:金額しか入力できない、小数点以下は入力できない、2桁までしか入力できない ある程度の入力ができない。栗:"@#¥%&*"などの特殊文字を入力することができません。
この場合、それは入力に直接制限する必要がある、フロントエンドのアプリケーションでは、主にこれらの問題を解決するために正規表現で使用されています。
最初のケース:特定の
<template>
<div id="app">
{{value}}
<el-input
v-model="value"
clearable
size="small"
class="row-value "
@input="numCheck(value)"
// Here I use input, which checks every input, or you can use check when change changes or check when blur loses focus.
>
</el-input>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
value:''
};
},
methods: {
numCheck(val){
if(val ! = ''){
if (/[^1-9]/.test(val)) {
//If you can't enter numbers then drop ^, /[1-9]/.test(val)
//only letters can be entered, /[^A-z]/.test(val)
//only letters or numbers (like passwords) can be entered, /[^1-9A-z]/).test(val)
this.$message({
type: "error",
message: "Only numbers can be entered, please re-enter! "
})
this.value = ''
}
}
}
}
};
</script>
2つ目のケースでは、固定フォーマットのみ入力可能です
1より小さい小数点以下2桁までしか入力できない
if(value > 1){
this.$message({
type: "error",
message: "Please enter a number less than 1! "
})
this.value = ''
return
}
if (! (/^([0-9]*)+(. [0-9]{1,2})? $/).test(val)) {
this.$message({
type: "error",
message: "Please enter two decimal places less than 1! "
})
this.value = ''
}
金額
if(value.length > 12){
this.$message({
type: "error",
message: "Length exceeds 12, please retype "
})
this.value = ''
return
}
if(! (/(^[1-9]([0-9]+)? (\. [0-9]{1,2})? $)|(^(0){1}$)|(^[0-9]\. [0-9]([0-9])? $)/).test(value)){
this.$message({
type: "error",
message: "Only numbers can be entered, please re-enter! "
})
this.value = ''
}
3つ目のケースは、あるものを入力しないでください。
var patrn = /[`~! @#$%^&*_\-+=<>? "{}|\/;'\\[\]-~! @#$%......&*----\-+={}|The? ""[]'',]/gim;
if (patrn.test(val)) {
this.$message({
type: "error",
message: "Please do not enter special characters! "
})
まとめ:正規表現をしっかり学ぶ、超重要!
正規表現でこの記事は、入力ボックス固定入力価値形式(金額、特殊文字)を解決するために、ここで紹介されて、より関連する入力ボックス固定入力価値形式の内容は、以前の記事のスクリプトのホームを検索してくださいまたは次の関連記事を閲覧し続けるあなたは、スクリプトの家をよりサポートすることを願っています!.
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン