質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
ColdFusion

ColdFusionはサーバーサイドの迅速なアプリケーションを開発するためのフレームワークであり、CFMLスクリプト言語を用いて動的なwebサイトの開発を可能とします。

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3580閲覧

JavaScriptによるIF文の関数化(同じIF文を2回使いたい)

Yoshino.M

総合スコア14

ColdFusion

ColdFusionはサーバーサイドの迅速なアプリケーションを開発するためのフレームワークであり、CFMLスクリプト言語を用いて動的なwebサイトの開発を可能とします。

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/05/24 04:14

###前提・実現したいこと
現在趣味で、JavaScriptとHTMLを使用してユーザー情報を管理するサイト開発をしているの(詳しくはColdfusion)ですが、その際のJavaScriptについての質問です。

大まかではありますが作ったサイトの説明です。
まずメイン画面に、登録しているユーザーの一覧、会員番号をクリックすると、その会員の情報の閲覧、更新及び削除の画面。
ユーザー登録の画面を作成しました。

ユーザー情報を更新及び登録の際のテキストボックスには入力のチェックルーチン?(フリガナはカタカナか、電話番号は数字なのか。)を通しています。私は更新と追加の画面をモードで管理しているので、1つのクラスで管理しています。
###発生している問題・エラーメッセージ

モード管理のため、長いチェックルーチンを2回張るのは不格好だと思いました。 なので、if文の関数化?はできないでしょうか?

###該当のソースコード

function check(){ var flag = 0; // 設定開始(必須にする項目を設定してください) if(document.form.name.value == ""){ alert("氏名を入力してください"); flag = 1; }else if(document.form.katakana.value.match(/[^ァ-ン]/)){//フリガナがカタカナかチェック alert("フリガナはカタカナで入力してください"); flag = 1; }else if(document.form.mail.value.match(/[^a-zA-z?s]+$/)){//メールアドレスに全角が使われていないかチェック alert("メールアドレスを正しく入力してください"); flag = 1; }else if(document.form.yubin.value.match(/[^0-9]/)){ //郵便番号数字チェック alert("郵便番号は数字で入力してください"); flag = 1; } } function koushin(){ check(); if(flag == 0){ document.frm.method = "post"; document.frm.action = "userupdate.cfm"; document.frm.submit() } } このソースコードのユーザー登録ver.もあり。 なお、チェックが長いため、ある程度は割愛しました。

###試したこと
function koushin内でのfunction check(クロージャー?)では成功しました。
###補足情報(言語/FW/ツール等のバージョンなど)
言語は前述した通り、JavaScriptになります。
おおもとはcoldfusion内でのJavaScriptになります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

配列

元のコードを尊重するなら配列を使えば良いですが、

JavaScript

1var tokens = [['name', /^$/, '氏名を入力してください'], ['katakana', /[^ァ-ン]/, 'フリガナはカタカナで入力してください'], ['mail', /[^a-zA-z?s]+$/, 'メールアドレスを正しく入力してください'], ['yubin', /[^0-9]/, '郵便番号は数字で入力してください']]; 2 3for (var i = 0, l = tokens.length; i < l; ++i) { 4 // 処理 5}

pattern属性

正規表現によるバリデーションを行うなら、input要素のpattern属性を使うほうが有用だと思います。

HTML

1<input type="text" name="name" pattern="^[\s\S]+$" data-errormessage="氏名を入力してください">

check 関数

変数 flag でフラグ管理されているようですが、返り値を Boolean 型 (true, false) にした方がスマートだと思います。
前述のpattern属性で実装する場合は、必要な時に自動的にバリデーション処理が行われるので能動的にチェック処理を走らせる必要はありませんが、カスタムエラーメッセージの為に setCustomValidity を事前実行する必要はあります。

document.form.katakana

JavaScript

1 }else if(document.form.katakana.value.match(/[^ァ-ン]/)){//フリガナがカタカナかチェック

document.form.katakana のように名前で参照するのは古い方法なので、止めた方が無難です。
下記手法をお勧めします。

  • getElementById
  • document.forms
  • document.querySelector
  • HTMLFormElement#elements

Re: Yoshino.M さん

投稿2017/05/24 04:30

編集2017/05/24 04:52
think49

総合スコア18189

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yoshino.M

2017/05/24 07:06

なるほど!配列に格納という考えはすごいです。 質問投稿後、パターンでもやってみましたが成功には至らず・・・ そうですね!確かにbooleanの方がパッと見わかりやすいかもですね! documentが古いといわれてしまうと、最新のやり方がわからず、折角理解してきたのを逃しそうなので、とりあえず今はこのままでいきたいと思います!しかし、いつまでも古いやり方でいるわけにもいかないので、もし宜しければ、お手すきの際に手ほどきをしていただけると幸いです。
guest

0

ベストアンサー

flag が返っていないのが問題です。

JavaScript

1function check(){ 2 var flag = 1; 3 // 設定開始(必須にする項目を設定してください) 4 if(document.form.name.value == ""){ 5 alert("氏名を入力してください"); 6 flag = 0; 7 }else if(document.form.katakana.value.match(/[^ァ-ン]/)){//フリガナがカタカナかチェック 8 alert("フリガナはカタカナで入力してください"); 9 flag = 0; 10 }else if(document.form.mail.value.match(/[^a-zA-z?s]+$/)){//メールアドレスに全角が使われていないかチェック 11 alert("メールアドレスを正しく入力してください"); 12 flag = 0; 13 }else if(document.form.yubin.value.match(/[^0-9]/)){ //郵便番号数字チェック 14 alert("郵便番号は数字で入力してください"); 15 flag = 0; 16 } 17 return flag; 18} 19function koushin(){ 20 if(check()){ 21 document.frm.method = "post"; 22 document.frm.action = "userupdate.cfm"; 23 document.frm.submit() 24 } 25}

投稿2017/05/24 04:19

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yoshino.M

2017/05/24 06:52

おかげさまでできました・・・ 1つ質問があるのですが、flagはなぜ01を逆にしたのでしょうか?
kei344

2017/05/24 07:00

「check()が通っていたら TRUE」のほうがわかりやすいからです。
Yoshino.M

2017/05/25 02:25

大変勉強になりました。 ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問