全角・半角文字チェック - Angular4で行う JavaScript
全角・半角文字チェック - Angular4で行う
システムで全角・半角文字のチェックは気になるポイントと思います。
下記は簡単なステップで説明しますので、何か不明な点をございましたらご連絡ください。
新しいコンポーネントの生成:
$ ng g c zenkaku-hankaku
上記のコマンドを実行したあとで、下記のフォルダーで「.css、.html、.ts」ファイルを生成されています。
/src/app/zenkaku-hankaku
# zenkaku-hankaku.component.css
<> zenkaku-hankaku.component.html
TS zenkaku-hankaku.component.spec.ts
TS zenkaku-hankaku.component.ts
次のステップは、「zenkaku-hankaku.component.ts」ファイルを開いて,変数と文字チェックロジックの追加。
export class ZenkakuHankakuComponent implements OnInit {
keyValues:string = '';
zenKakuKeyValue:string = '' ;
hanKakuKeyValue:string = '' ;
zenKakuMessage:string = '' ;
hanKakuMessage:string = '' ;
constructor() { }
ngOnInit() {
}
}
onKeyTodo(event: any, values) {
this.keyValues = event.target.value;
// start - Switch input
switch (values) {
case 'zenkaku_name':
this.zenKakuMessage = '全角のみを入力してください。';
this.zenKakuKeyValues = 'zenkaku_name';
this.check2ByteFunc(this.keyValues, values, this.zenKakuKeyValue, this.zenKakuMessage);
break;
case 'hankaku_name':
this.hanKakuMessage = '半角のみを入力してください。';
this.hanKakuKeyValues = 'hankaku_name';
this.check1ByteFunc(this.keyValues, values, this.hanKakuKeyValue, this.hanKakuMessage);
break;
}
// end - Switch input
}
// DOUBLE BYTE 全角文字
// --------------------------------------------------------------------
// 関数者 : Alok Rawat
// Function to Check 全角文字
// ---------------------------------------------------------------------
check2ByteFunc(val, col_name, header_name , msg) {
const actual_len = val.length;
const str_len = this.countLength(val);
let err_val = '';
if (parseInt(actual_len)*2 === str_len) {
this.clearErrMsg(header_name);
} else {
for (let i = 0; i <= val.length - 1; i++) {
if (this.countLength(val[i]) === val[i].length) {
if (err_val !== '' ) {
err_val = err_val + ',' + val[i];
} else {
err_val = val[i];
}
}
}
}
}
// SINGLE BYTE 半角文字
// --------------------------------------------------------------------
// 関数者 : Alok Rawat
// Function to Check 半角カナ文字
// ---------------------------------------------------------------------
check1ByteFunc(val, col_name, header_name, msg) {
// Function to Check 半角カナ
const reg = new RegExp(/^[ヲ-゚ 、0-9a-zA-Z]*$/);
if ( val.match(reg)) {
this.clearErrMsg(header_name);
}
}
他の半角文字を追加したいの場合は、下記のリンクをご参照ください。
https://javascript.programmer-reference.com/js-check-hankaku-kana/
// count the length of the input string
countLength(str) {
let r = 0;
for (let i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
// Shift_JIS: 0x0 ~ 0x80, 0xa0 , 0xa1 ~ 0xdf , 0xfd ~ 0xff
// Unicode : 0x0 ~ 0x80, 0xf8f0, 0xff61 ~ 0xff9f, 0xf8f1 ~ 0xf8f3
if ( (c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
r += 1;
} else {
r += 2;
}
}
return r;
}
// if input value is valid then clear the error.
clearErrMsg(namekey) {
if ( namekey === 'zenkaku_name') {
this.zenKakuMessage = '';
}
if ( namekey === 'hankaku_name') {
this.hanKakuMessage = '';
}
}
「zenkaku-hankaku.component.html」ファイルを開いて,textboxとngの設定
<p>
<u>全角・半角チェック機能確認</u>
</p>
<div class="row">
<div class="container-fluid">
<div class="form-group col-sm-6">
<label class="label-control">名称</label>
<label label_back_color>(全角のみ)</label>
<input name="zenkaku_name" type="text" class="form-control"
(keyup)="onKeyTodo($event,'zenkaku_name')" placeholder="例:山田 太郎" />
<div class="text-danger" *ngIf="zenKakuKeyValue=='zenkaku_name'">{{ zenKakuMessage }}</div>
</div>
<div class="form-group col-sm-6">
<label class="label-control">メイショ(カナ)</label>
<label label_back_color>(半角のみ)</label>
<input name="hankaku_name" type="text" class="form-control"
(keyup)="onKeyTodo($event,'hankaku_name')" placeholder="例:ヤマダ タロウ"/>
<div class="text-danger" *ngIf="hanKakuKeyValue=='hankaku_name'">{{ hanKakuMessage }}</div>
</div>
</div>
</div>
下記は結果の情報です。
■全角文字チェック
1.NGケース:
終わり!!!
Enjoy coding!
Thanks & Best Regards,
Alok Rawat
Author And Source
この問題について(全角・半角文字チェック - Angular4で行う JavaScript), 我々は、より多くの情報をここで見つけました https://qiita.com/alokrawat050/items/b3fd403e72801d9033f9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .