Q&A
＞文字列が入力されたかどうか
「文字列」の定義をもっと具体的にしてください。
前提・実現したいこと
inputタグに入力された、文字列のバリデーションを行いたいと考えています。
バリデーションの要件は以下の3つです
・文字列が入力されたかどうか
・少数が入力されたかどうか
・空欄でないかどうか
発生している問題・エラーメッセージ
現状、typeofを使用し、型判定を行なってみましたが、inputタグに入力された値は全て「String」型になってしまい、文字列かどうかなどをチェックすることが出来ない状況です。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>FizzBuzz</title> 7</head> 8<body> 9 <h1>FizzBuzz問題</h1> 10 <p> 11 FizzNum: 12 <input type="text" id="fizz_num"> 13 </p> 14 <p> 15 BuzzNum: 16 <input type="text" id="buzz_num"> 17 </p> 18 <input type="button" id="button" value="実行"> 19 <p>【出力】</p> 20</body> 21<script type="text/javascript" src="kadai-2.js"></script> 22</html>
js
1'use strict'; 2document.getElementById("button").onclick = function(){ 3 let fizz_num = document.getElementById("fizz_num").value; 4 let buzz_num = document.getElementById("buzz_num").value; 5 let err_msg = '' 6 if(fizz_num === ''){ 7 err_msg = 'fizz_numに値を入力して下さい' 8 }else if(buzz_num === ''){ 9 err_msg = 'buzz_numに値を入力して下さい' 10 } 11 12 13 14 15 16 // console.log(err_msg) 17 // console.log(typeof(fizz_num)) 18 // console.log(typeof(buzz_num)) 19}
こちらの問題解決の為、どなたかアドバイス頂けましたら幸いです。
追記です
今回バリデーションは、文字列でないか、少数でないか、空白でないかの３つのチェックを行いたい為、文字列は、整数や少数、空白以外を対象に考えています。
'' ですら「空文字」です。
配列、NULL以外は広義では「文字列」とも言えます。
「何を文字列とするか」を具体的に定義しないことには組めません。
＞整数や少数、空白以外を対象に考えています。
では「整数」「少数」「空白」が判定できれば「それ以外」で「定義した文字列」になりますね。
要は「ブラックリスト方式」か「ホワイトリスト方式」かでチェックするわけで
整数→OK
少数→OK
空白→OK
としてそれ以外→NG
にできます。
> では「整数」「少数」「空白」が判定できれば「それ以外」で「定義した文字列」になりますね。
こういった考えも出来る訳ですね。一度試してみます！
> ・文字列が入力されたかどうか
> ・空欄でないかどうか
同じ要件に見えますが、両者の違いは何でしょうか。
また、「されたかどうか」は「される」と「されない」のどちらが正解なのか不確定です。
>・文字列が入力されたかどうか
入力された値が整数であり、文字列でないかどうかをチェックするという意図でした。
今回の件ですが、inputタグの値が全て文字列型となってしまうのですが、そもそも整数もしくは少数であるかどうかを判断することは可能でしょうか？
負の整数もありますが…。
FizzBuzzとしては「自然数」を正とする実装が良さそうですね。
未確認ですが。
<input type="text" pattern="\d+">
負の数を許容するなら少し変更が必要です。
まあ課題なので当然 HTML はいじらず JavaScript で三種類のチェックを入れることが求められていると思います。その意味で今ある回答は的外れですね。
回答1件
0
ベストアンサー
HTMLInputElement
[Exposed=Window] interface HTMLInputElement : HTMLElement { /* ...(中略)... */ [CEReactions] attribute [LegacyNullToEmptyString] DOMString value; attribute unrestricted double valueAsNumber;
input要素ノードの value プロパティは**String型(DOMString)**に固定されています。
Number 型が必要なら、valueAsNumber プロパティを使います。
input[type="number"]
<input type="number"> を使用すると、数値の入力を強制できます。
HTML
1<input type="number">
整数
入力された値が整数であり、文字列でないかどうかをチェックするという意図でした。
「1の剰余」を演算して下さい。
JavaScript
1console.log(1.1 % 1 === 0); // false 2console.log(-1.1 % 1 === 0); // false 3 4console.log(10 % 1 === 0); // true 5console.log(-10 % 1 === 0); // true
Re: ruuuu さん
投稿2020/12/05 03:35
編集2020/12/05 03:49総合スコア18189
低評価理由を教えてください
ご回答ありがとうございます。
自分知らなかったのですが、「<input type="number"> 」で数値を入力させることが可能なのですね。
>console.log(1.1 % 1 === 0);
こちらですが、以下のようにNumber型に変換した後、Number.isIntegerを通すことでもチェック可能でした。
fizz_num = Number(fizz_num)
if(fizz_num){
if(!Number.isInteger(fizz_num)){
fizz_num_err_msg = 'FizzNumに整数を入力して下さい'
}
@ruuuu さん
そのやり方でもいいですね。
後は元コードにある空文字比較で空値を判定、もしくはrequired属性で判定すれば、要件を達成できると思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
あなたの回答
tips
プレビュー
