前言：

自2017.7.6入職，如今已經整整五個月。在天津的培訓階段已經接近尾聲，我認為有必要總結一下這段時間學到的點點滴滴。做技術重在經驗和積累，既然入了軟體開發的“坑”，我只能硬著頭皮往下走。無論如何，在這條“軟”路上，我走過的每一步都應有它的意義和價值。

該前端專案簡述：一個自動化資料採集軟體，前端用html+css+javascript+jQuery實現，後端用node.js與前端互動。

本人負責部分：登入介面、主介面、使用者管理介面、客戶端使用者管理介面。

積累：（一）表單驗證

因為我做的就是使用者相關的東西，表單驗證環節至關重要。這裡做的驗證僅是本地合法化驗證，不與後端相關（如果使用者輸入有誤，

1. 正則表示式

用正則表示式來匹配字元，是表單驗證的常用方法。

兩種定義方法：

var re = new RegExp("a","i");
var re = /a/i;

（特殊字元、數字、空格、任意字元、中文匹配 ......）

正則表示式物件的方法：

exec(); //執行匹配，返回找到值的陣列，沒找到返回null
test(); //測試匹配，返回bool值
toSource(); //返回RegExp物件原始碼
toString(); //返回RegExp物件字串
 

2. 專案中應用例項

（1）HTML：

<div class="login-box">
  <form class="login-form" action="/user/login" method="post">
    <div class="controlgrp">
      <label class="control-lbl" id="name-label" for="name"></label>
      <input class="control-name" type="text" name="name" placeholder="使用者名稱（中文或英文）" id="userName"/>
    </div> 
    <span class="msg"></span>
    <div class="controlgrp">
      <label class="control-lbl"id="passwd-label" for="passwd"></label>
      <input class="control-pwd" type="password" name="passwd" placeholder="密碼（6-16個字元）" id="userPwd"/>
    </div>
    <span class="msg"></span>
    <p id="message" style="margin-left:110px;font-size:14px;"><%= message %></p>
    <div class="control">
        <input class="control-remember" type="checkbox" name="remember-me" id="remember" ><label style="font-size:14px; vertical-align:middle;">記住我</label>
    </div>
    <div class="control">
      <input class="control-submit" type="submit" value='登入' onclick="setCookie()">
      <input class="control-reset" type="button" value='重置' onclick="login_reset()">
    </div>
  </form>
</div><!-- login-box  end -->
 

（2）javascript

//計算字元長度（一個漢字為兩個字元長度）
function getLength(str){
	return str.replace(/[^\x00-xff]/g,"xx").length;
}
//查詢字串中的重複字元個數
function findStr(str,n){
	var tmp=0;
	for(var i=0;i<str.length;i++){
		if(str.charAt(i)==n){
			tmp++;
		}
	}
	return tmp;
}
window.onload = function(){
	login_form_check();
}
//登入頁面-表單合法化校驗
var usernameCheckRes = true;
var userpwdCheckRes = true;
function login_form_check(){
	var oName = document.getElementById("userName");
	var oPwd = document.getElementById("userPwd");
	var oMsg = document.getElementsByClassName("msg");
	var oName_msg = oMsg[0];
	var oPwd_msg = oMsg[1];
	//使用者名稱合法化校驗
	oName.onblur = function(){
		var name_length=getLength(this.value);
		var re=/[^\w\u4e00-\u9fa5]/g;//非法的使用者名稱
		//含有非法字元
		if(re.test(this.value)){
			oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>含有非法字元';
			usernameCheckRes = false;
		}
		//不能為空
		else if(this.value==""){
			oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
			usernameCheckRes = false;
		}
		//長度應為4-20個字元
		else if(name_length<4 || name_length>20){
			oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>長度應為4-20個字元';
			usernameCheckRes = false;
		}
		//正確
		else{
			oName_msg.innerHTML = '<i class="fa fa-check-circle" style="margin-right:5px;"></i>';
			usernameCheckRes = true;
		}
	}
	//密碼合法化驗證
	oPwd.onblur = function(){
		var m=findStr(oPwd.value,oPwd.value[0]);
		var re_n=/[^\d]/g;//數字
		var re_t=/[^a-zA-Z]/g;//字母
		//不能為空
		if(this.value==""){
			oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
			userpwdCheckRes = false;
		}
		//長度應為6-16個字元
		else if(this.value.length<6 || this.value.length>16){
			oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>長度應為6-16個字元';
			userpwdCheckRes = false;
		}
		//不能全為相同字元
		else if(m == this.value.length){
			oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全為相同字元';
			userpwdCheckRes = false;
		}
		//不能全是數字
		else if(!re_n.test(this.value)){
			oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全為數字';
			userpwdCheckRes = false;
		}
		//不能全是字母
		else if(!re_t.test(this.value)){
			oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全為字母';
			userpwdCheckRes = false;
		}
		//正確
		else{
			oPwd_msg.innerHTML = '<i class="fa fa-check-circle" style="margin-right:5px;"></i>';
			userpwdCheckRes = true;
		}
	}
}

同時阻止向伺服器端傳送資料（兩種情況）

a. submit提交的表單，通過onsubmit返回false

<form class="login-form" action="/user/login" method="post" onsubmit="return login_check()">

function login_check(){
	var msg = document.getElementsByClassName("msg");
	if(document.getElementById("userName").value == "")
	{ 
		msg[0].innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
		document.getElementById("userName").focus();
		return false;
	}
	else if(false == usernameCheckRes)
	{
		document.getElementById("userName").focus();
		return false;
	}
	else if(document.getElementById("userPwd").value == "")
	{
		msg[1].innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
		document.getElementById("userPwd").focus();
		return false;
	}
	else if(false == userpwdCheckRes)
	{
		document.getElementById("userPwd").focus();
		return false;
	}
	return true;
}

if(false == nameCheckRes){
	document.getElementById("add-name").focus(); //定位到當前位置
}
else if(false == pwdCheckRes){
	document.getElementById("add-pwd").focus();  //定位到當前位置
}
else{
	loadXMLDoc("/user/create", str, function() {
            ... 
}

（3） 實際效果

後記：

這是自己第一次寫部落格來記錄每天的收穫，希望以後能堅持下去，加油！