ES2015(ES6) のsome()とevery()でバリデーションを実装する
some()とevery()はES5との指摘を受けました。
ES6となっているとろはES5と読み替えてください…。
someメソッド、everyメソッドとは
someメソッド
配列の中の値のどれか一つでも一致したらtrueを返し、一つも一致しない場合はfalseを返します。
Array.prototype.some()
everyメソッド
配列の中の値すべてに一致した場合にtrueを返し、一つでも一致しないものがあった場合、falseを返します。
Array.prototype.every()
//配列の設定
const array = [1, 30, 39, 29, 10, 13];
//someメソッド
const some = array.some(elem =>{
return elem < 20;
});
//everyメソッド
const every = array.every(elem =>{
return elem < 20;
});
console.log(some); // true
console.log(every); // false
someメソッドとeveryメソッドで実装するバリデーション
ES6より導入されたsomeメソッドとeveryメソッドを使うとバリデーションを簡単に実装することが出来ます。
以下簡易的なサンプルです。
See the Pen
RzzEyp by YusukeIkeda (@YusukeIkeda)
on CodePen.
<html>
<head>
<meta charset="utf-8">
<style>
form{
padding: 10px;
}
input[type="text"] {
width: 100px;
padding: 5px;
}
p{
margin-bottom: 0;
}
</style>
</head>
<body>
<form>
<div>
<p>電話番号</p>
<input type="text" value="" name="phone1" id="phone1"> -
<input type="text" value="" name="phone2" id="phone2"> -
<input type="text" value="" name="phone3" id="phone3">
</div>
<div>
<p>住所1</p>
<input type="text" value="" name="address1" id="address1">
<p>住所2</p>
<input type="text" value="" name="address2" id="address2">
</div>
<br>
<input type="button" value="送信" id="button">
</form>
<script src="validate.js"></script>
</body>
</html>
JavaScript
ES5までの書き方
まずはES5までの書き方です。if文の中に || か && で繋いで条件を判定する方法です。
document.getElementById('button').addEventListener('click', validate, false);
function validate(){
//値の取得
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
var phone1 = document.getElementById('phone1').value;
var phone2 = document.getElementById('phone2').value;
var phone3 = document.getElementById('phone3').value;
if(address1.length != '' || address2.length != ''){
console.log('address OK');
} else {
console.log('どちらかは入力する必要があります');
}
if(phone1.length != '' && phone2.length != '' && phone3.length){
console.log('phone OK');
} else {
console.log('すべて入力されている必要があります');
}
}
some()とevery()を使った書き方
ES6で導入されたsome()とevery()を使った書き方です。
正直このサンプルの場合、ES5までの書き方の方がシンプルな気がするけど、バリデーションの項目が増えても返り値の真偽を判定するだけなのでif文の条件を弄らなくてよくなります。
document.getElementById('button').addEventListener('click', validate, false);
function validate(){
//値の取得
const address1 = document.getElementById('address1').value;
const address2 = document.getElementById('address2').value;
const phone1 = document.getElementById('phone1').value;
const phone2 = document.getElementById('phone2').value;
const phone3 = document.getElementById('phone3').value;
const array_address = [address1, address2];
const array_phone = [phone1, phone2, phone3];
const check_input = element =>{
return element.length != '';
}
const check_address = array_address.some(check_input);
const check_phone = array_phone.every(check_input);
//someメソッドの返り値で条件判定をする。
if(check_address){
console.log('address OK');
} else {
console.log('どちらかは入力する必要があります');
}
//everyメソッドの返り値で条件判定をする。
if(check_phone){
console.log('phone OK');
} else {
console.log('すべて入力されている必要があります');
}
}
まとめ
es6より便利なメソッドが多く追加されていますが特にsomeとeveryはバリデーションを実装する時に威力を発揮しそうです。また、someメソッドについてはPHPのin_array的な実装が簡単にできる感じなので今後使ってみようと思います。
Author And Source
この問題について(ES2015(ES6) のsome()とevery()でバリデーションを実装する), 我々は、より多くの情報をここで見つけました https://qiita.com/ikdysk/items/ff2f8b23f6dfe717819c著者帰属：元の著者の情報は、元の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 .