從0開始，編寫乙個驗證函式（工具函式）

之前寫專案的時候，一般都是在登入註冊，修改密碼的時候有需要些正則的需求，所以每次用到的時候都是直接從前面的**copy過去就好了，直到後台開始寫後台管理系統類的專案，複製貼上已經完全不可行了。怎麼能做乙個只會ctrl+c，ctrl+v的程式猿呢！簡直不能忍，於是就想到了自己寫乙個驗證函式，每次需要做驗證的時候只需要呼叫這個函式，傳入引數就可以了，想想都美滋滋。

做驗證的時候我們要做的，定義驗證失敗後的提示，編寫驗證的方法，然後呼叫驗證得到結果。

乙個驗證的過程，一般便是分為這幾步。

var validatorobj = ，
// 驗證的方法， 返回乙個布林值
methods: {}
}，// 得到驗證結果
checkresult: {}
}

定義的錯誤提示可以自定義，至於等則是用來做乙個識別符號，在驗證失敗後會將要驗證的引數替換掉識別符號 // 驗證失敗後的提示 messages: ', max: '長度最多為個字元', min: '長度最小為個字元', length: '的長度在到個字元', number: '必須是數字', string: '必須是字母或者數字', moblie: '必須是手機或者**號碼格式', nochinese: '不能為中文', lon: '範圍為-180.0～+180.0（必須輸入1到10位小數）', lat: '範圍為-90.0～+90.0（必須輸入1到10位小數）', url: '請輸入正確的訪問位址', repeat: '兩次輸入的不一致', email: '郵箱格式不正確', password: '請輸入由大小寫字母+數字組成的6-16位密碼', fixednum: '請輸入位數字'

}

在定義對應的驗證方法：

可以看到幾乎在每個驗證前面都加了乙個當資料為空的時候，返回為true，這是因為有的時候我們並不關心某乙個資料是否填寫，但一旦填寫了，又要求符合某種規則。所以如果要驗證非空的時候，需要使用兩個驗證屬性。
// 驗證的方法， 返回乙個布林值
methods: ,
max: obj => ,
min: obj => ,
length: obj => ,
number: obj => ,
string: obj => ,
moblie: obj => [\d])|(((400)-(\d)-(\d))|^((\d)|(\d|\d)-(\d)|(\d|\d)-(\d)-(\d|\d|\d|\d)|(\d)-(\d|\d|\d|\d))$)$/
return reg.test(obj.value)
},nochinese: obj => ,
lon: obj => \.\d|1[0-7]?\d\.\d|180\.0)$/
return reg.test(obj.value)
},lat: obj => \.\d|90\.0)$/
return reg.test(obj.value)
},url: obj => [pp]:\/\/|[hh][tt][pp][ss]:\/\/)(([a-za-z0-9-~]+)\.)+([a-za-z0-9-~\/])+$/
return reg.test(obj.value)
},repeat: obj => ,
email: obj => $/
return reg.test(obj.value)
},password: obj => $/
return reg.test(obj.value)
},fixednum: obj => 
}

呼叫驗證方法：

這裡是呼叫驗證函式的方法，和上面的定義結合起來。
傳入要驗證的規則，驗證的值，驗證的欄位名字，如果有條件則加上條件陣列
/** 1.  傳入驗證規則，得到驗證結果
2.  @param  
3.  @param  label: 驗證的欄位名稱
4.  @param  value: 驗證的值 (驗證重複的時候可以新增value1屬性)
5.  @param  rules: 驗證的規則陣列 例如： ['notnull', 'length'] 如果引數必填，第乙個引數為notnull
7.  @return   驗證結果物件
*/// 得到驗證結果
checkresult: function (obj) 
}// 如果驗證失敗, 得到驗證失敗的結果集
if (!result) ', item)})}
message = message.replace('', obj.label)
return 
}return 
}

把上面的步驟拼在一起，就可以完成乙個驗證函式。具體的需求和使用，可以根據專案自定義，但思路大致是這樣的。

使用示例: validate() // 驗證username不為空且長度在2-10之間
validate() // 驗證password由大小寫字母+數字組成的6-16位密碼
驗證返回結果: 
/** * 傳入驗證規則，得到驗證結果
* @param  
*  @param  label: 驗證的欄位名稱
*  @param  value: 驗證的值 (驗證重複的時候可以新增value1屬性)
*  @param  rules: 驗證的規則陣列 例如： ['notnull', 'length'] 如果引數必填，第乙個引數為notnull
* @return   驗證結果物件
*/function validate (obj) ',
max: '長度最多為  個字元',
min: '長度最小為  個字元',
length: '的長度在  到  個字元',
number: '必須是數字',
string: '必須是字母或者數字',
moblie: '必須是手機或者**號碼格式',
nochinese: '不能為中文',
lon: '範圍為-180.0～+180.0（必須輸入1到10位小數）',
lat: '範圍為-90.0～+90.0（必須輸入1到10位小數）',
url: '請輸入正確的訪問位址',
repeat: '兩次輸入的不一致',
email: '郵箱格式不正確',
password: '請輸入由大小寫字母+數字組成的6-16位密碼',
fixednum: '請輸入位數字'
},// 驗證的方法, 返回乙個布林值
methods: ,
max: obj => ,
min: obj => ,
length: obj => ,
number: obj => ,
string: obj => ,
moblie: obj => [\d])|(((400)-(\d)-(\d))|^((\d)|(\d|\d)-(\d)|(\d|\d)-(\d)-(\d|\d|\d|\d)|(\d)-(\d|\d|\d|\d))$)$/
return reg.test(obj.value)
},nochinese: obj => ,
lon: obj => \.\d|1[0-7]?\d\.\d|180\.0)$/
return reg.test(obj.value)
},lat: obj => \.\d|90\.0)$/
return reg.test(obj.value)
},url: obj => [pp]:\/\/|[hh][tt][pp][ss]:\/\/)(([a-za-z0-9-~]+)\.)+([a-za-z0-9-~\/])+$/
return reg.test(obj.value)
},repeat: obj => ,
email: obj => $/
return reg.test(obj.value)
},password: obj => $/
return reg.test(obj.value)
},fixednum: obj => }},
// 得到驗證結果
checkresult: function (obj) 
}// 如果驗證失敗, 得到驗證失敗的結果集
if (!result) ', item)})}
message = message.replace('', obj.label)
return 
}return 
}}  return validatorobj.checkresult(obj)
}export default validate

從0開始，編寫乙個驗證函式（工具函式）

如何從0開始了解乙個儲存引擎

從 0 開始手寫乙個Tomcat，7 步搞定！

編寫乙個mysleep函式

從0開始，編寫乙個驗證函式（工具函式）

如何從0開始了解乙個儲存引擎

從 0 開始手寫乙個Tomcat，7 步搞定！

編寫乙個mysleep函式

相關推薦