技術標籤：JS前端工具

需求
AntD中Form表單自定義驗證規則，不能為xxx或者只能是xxx

程式碼
不能為xxx

<Form.Item
	label="學生編碼"
	name="stuId"
	validateFirst={true} // 出錯時兩個校驗分別生效
	rules={[
		{ required: true, message: '學生編碼不能為空' },
		{ validator: (rule, value) => {
			let reg = new RegExp(/[\u4E00-\u9FA5]/);
			if(reg.
 
test(value)) {
				return Promise.reject('學生編碼不能為漢字');
			} else {
				return Promise.resolve();
			}
		}},
	]}
>
	<Input placeholder="請填寫學生編碼" className="create-input" />
</Form.Item>

只能是xxx

// utils.js檔案
// 金額校驗 
export const moneyTest = (str) => {
	if(str<0 || str>
 
10000000000) {
		return false
	}
	return /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/g.test(str);
};

import * as util from '../../js/utils.js';

<Form.Item
	name="money"
	label="金額(元)"
	validateFirst={true}
	rules={[
		{ required: true, message: '金額不能為空' },
		({ getFieldValue }) => ({
			validator(rule,
 
 value) {
				if (util.moneyTest(value)) {
					return Promise.resolve();
				}
				return Promise.reject('小數點前最大10位，小數點後最多2位');
			},
		})
	]}
>
	<Input className="create-input" />
</Form.Item>

參考文章
Ant Design Form表單
官方文件
antd Form中getFieldDecorator校驗不能輸入空字元和特殊字元
AntD升級到4.x版本後就不能這麼用了