Zenn
🙌

【初心者向け/ITスクール40日】JSのバリデーションチェック

2023/09/06に公開
CSS
HTML
Java
JavaScript
tech

はじめに

今日は、ITスクールに通った40日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

39日目は、HTML/CSSで作成したWEBページをJavaScriptと連携して、バリデーションチェックをし、ServletからHTMLから入力したデーターを処理する練習をしました。

その前に、簡単な基礎文法も勉強したいと思います。

JavaScript基礎文法2

Undefined処理

JSは、パラメターがある関数に実引数が入らない際に、undefinedで処理します。

そのため、関数内でundefinedを処理する方法として、default値を指定することができます。
メソッド内でundefinedがfalse という原理を理由する方法と、パラメターからdefaultを指定する方法があります。

function sayHello1(name){
   let newName = name || 'friend';
   let msg = `hello, ${name}!`
  console(msg);
}

function sayHello2(name='Friend'){
    let msg = `Hello, ${name}`;
    console.log(msg);
}

関数宣言　vs 関数式

関数宣言は今まで、宣言したものと同じ方法です。

function 関数名(パラメーター){
   //処理内容
}

関数式は、変数に代入して関数定義を行う構文を関数式と呼びます。
関数名を付けず、呼び出すため、匿名関数とも呼ばれています。

let abc = function(パラメーター){
   //処理内容
}

関数式は以下のように簡単に表現することもできます。

let add = function(num1,num2){
return num1+num2;
}

let add = (num1,num2) => {
return num1+num2;
}

let add = (num1,num2)=>{
num1+num2
}

let add = (num1,num2)=>num1+num2;
//リターンするコードが一つの場合、{}省略可能

let setName = name => `Hello, ${name}`;
//リターンするコードが一つでパラメーターも一つの場合、{}省略可能

let asdf = () => console.log('asdf');
//パラメーターがない場合は()省略不可

バリデーションチェック

htmlからサーバーを通してデーターを転送する前にデーターがフォームの形式に合うかどうかを1次のフィルターのようにチェックすることをバリデーションチェックと呼びます。

JavaScriptとhtml のformタグとonsubmit attribute, input tagのname attributeを活用し、
データーのバリデーションチェックをする練習をしました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	</script>

</head>
<body>
 <form action = "noname" name = "ff" onsubmit= "return checkValid();">
   ID <input name = "id" maxlength = "10" autofocus = "autofocus"> <p>
   PW <input name = "pw" maxlength = "10"> <p>
   PW Check <input name = "pwcheck" maxlength = "10"> <p>
   Foot Size <input name = "footsize" mexlength = "3"> <p>
   <hr>
	<button>Submit</button>
</form>
</body>
</html>

JavaScriptファイルのcheckValid()からリターンする値がtrueの場合のみ、nonameというServletにデーターを送られます。

<script type ="text/javascript">
    function checkValid(){
	let idInput = document.ff.id;
	let pwInput = document.ff.pw;
	let pwCheckInput = document.ff.pwcheck;
	let footInput = document.ff.footsize;
	
	if(!idInput.value){   //idInputがfalseになる場合(null,"",undefined,NaN,null)
	    alert("IDを入力してください。");
	    idInput.focus(); //
	    return false;
	 }
	.
	.
	.
	let numExist = false; 
	let num = "369"; //indexOf 
	for(var i = 0; i < num.length; i++){
		if(pwInput.value.indexOf(num[i]) != -1){ 
		numExist = true;
		break;
	    }
	}
	.
	.			      .
	.
	if(isNaN(footInput.value)){
		alert("足のサイズには数字のみ入れます。");
		footInput.value = "";
		footInput.focus();
		return false;
		}
	return true;			    
    }
</script>

const checkEng = /[a-zA-Z]/;
const checkKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

if(!checkKor.test(name.value)&& !checkEng.test(name.value)){
	alert("이름은 한글과 영어만 입력 가능합니다.");
	name.focus();
	return false;	
	}

このようにRegexで簡単に処理することもできます。
test()という関数も活用してみました。

Discussion