taro 表單校驗

2021-10-17 23:13:44 字數 1113 閱讀 2546

涉及到表單校驗,檢視了taro-ui的form元件,發現並沒有實現表單校驗

so~安裝async-validator 來實現表單校驗(是乙個表單的非同步驗證的第三方庫,

貼上**

export const onvalidatefield = (value: validatesource, rules: rules) =>  else ;

});resolve(errmsg);

}});

});};

以下 formitem 是自己封裝的乙個容納錯誤資訊的元件

const [formvalue, setformvalue] = usestate();

const [msglist, setmsglist] = usestate(null);

const formrules = ,

],contactphone: [

,$/.test(value);

},message: "請輸入正確的手機號",

},],

} // 格式表單錯誤資訊為

export const geterrormsglist = (errors: any) => ;

errors?.map((error: ) => );

return msglist;

};const seterrormsglist = (errors) => );

};// 表單值change的時候校驗

const onformitemchange = async (label, value) => );

const errors = await onvalidatefield(,,

);seterrormsglist(errors);

};// 提交的時候校驗

const onsubmit = async () =>

};onformitemchange("contactname", value)}

/>

onformitemchange("contactphone", value)}

placeholder="請輸入手機號碼"

/>

jQuery表單校驗

formid validate 需要錄入的另一種寫法 ublog 需要輸入,且錄入的必須是url messages submithandler function form 閱讀一下文件差不多就會了解,支援的校驗格式有 required 必填字段 email 電子郵件 url 合法的 date 日期 ...

AngularJs 表單校驗

angularjs實現了資料雙向繫結,改變了html格局下需手寫大段js來處理動態資料問題。不能為空 長度不足3位 已存在其中ng submit表示表單的提交方法為processform 而required用於非空校驗 ng minlength用於最短長度校驗 name validation則是自定...

element ui 表單校驗

一 最普通的驗證 html model ruleform rules rules ref ruleform label width 100px class demo ruleform 名稱 prop name v model ruleform.name el input el form item e...