[is.js] 簡單上手的前端格式檢查套件

JavaScript 常用套件推薦

Matol

2019/02/14

在建置使用者填寫資料頁面時，常常會因為格式驗證而傷腦筋，像是日期、Email格式等

這時發現一個好用的前端套件 is.js

在頁面引入即可，套件上使用也非常簡易直覺

// 驗證mail 傳回 true or false
is.email('matol@test.com')  // true

// 檢查瀏覽器或工具 傳回 true or false
is.chrome(); 
is.firefox();  
is.android();
is.mac();

// 驗證值是否包含在陣列內
is.inArray(33, [1, 33, 55]) // true
is.inArray(66, [1, 33, 55]) // false

更多的函示可在 is.js網站 查看

下圖為測試的 html code

<html>
	<body>		
		<script src="./is.min.js"></script>
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script>
			$(function(){
				console.log('驗證mail格式：')
				console.log(' matol@test.com：' + is.email('matol@test.com'))
				console.log(' matol@aaa：' + is.email('matol@aaa'))
				
				console.log('檢查使用的瀏覽器：')
				console.log(' firefox：' + is.firefox() + ' \n chrome：' + is.chrome())
				
				console.log('檢查ip格式：')
				console.log(' ipv4：192.168.1.1\n' + is.ip('192.168.1.1') + '\n ipv6：2001:0DB8:02de:0000:0000:0000:0000:0e13\n' + is.ip('2001:0DB8:02de:0000:0000:0000:0000:0e13'))
				console.log(' ipv4：192.168.1\n' + is.ip('192.168.1') + '\n ipv6：2001:0DB8:0e33132\n' + is.ip('2001:0DB8:0e33132'))
				
				console.log('檢查值是否包含在陣列中：')
				console.log(' 33 => [1,33,55]：' + is.inArray(33, [1, 33, 55]) + '\n 66 => [1,33,55]：' + is.inArray(66, [1, 33, 55]))
			})
		</script>
	</body>
</html>

回傳結果

要注意的是，重要資料還是需經由後端驗證，因使用者可經由其他方式跳過前端驗證直接送回後端，導致怪異資料加進資料庫

前端驗證主要是提升使用者操作順暢度(即時提示)與減少送回後端次數 (降低伺服器負擔)