在一個開發項目中表單的提交沒有用到網上的插件或者組件,所以的話就想寫一個用於驗證的公共方法,以後也可以複用:
/**
* 進行表單的基本驗證
* @param {IRule[]} rules 驗證的規則數組
* @param {IValues} values 表單數據對象
*/
export interface IRule{
name: string;
type: string;
pattern?: RegExp;
errMsg: string;
required: boolean;
}
export interface IErrObj{
name:string;
msg:string;
}
export interface IValues{
[prop:string]:any;
}
export function validate (rules:IRule[],values:IValues){
if( rules.length <= 0) return;
if( Object.keys(values).length <= 0 ) return;
const valuesName = Object.keys(values);
const needValidateRule = rules.filter(item => valuesName.includes(item.name));
if(needValidateRule.length <= 0) return;
const errObj:IErrObj={
name:'',
msg:'',
};
const flag = valuesName.every(valueItem => {
return needValidateRule.every(ruleItem => {
const { name, required = false, type = 'string', pattern, errMsg } = ruleItem;
if(valueItem === name){
if(typeof values[valueItem] !== 'object' && typeof values[valueItem] !== 'undefined' && typeof values[valueItem] !== type){
errObj.name = valueItem;
errObj.msg = '類型錯誤';
return false;
}
if(typeof values[valueItem] === 'object' && type === 'array'){
if(!(values[valueItem] instanceof Array)){
errObj.name = valueItem;
errObj.msg = '類型錯誤';
return false;
}
}
if(required && (values[valueItem] === '' || values[valueItem] == null)){
errObj.name = valueItem;
errObj.msg = '該項爲必填項';
return false;
}
if(pattern && !pattern.test(values[valueItem])){
errObj.name = valueItem;
errObj.msg = errMsg || '該項填寫錯誤';
return false;
}
return true;
}
return true;
})
})
if(!flag){
return errObj;
}else {
return true;
}
}
以上是完整的代碼,各位可以直接拷貝使用,我只是進行了初步的測試,如果各位發現有什麼問題,歡迎評論