antdesign的多个form表单校验
一、表单
<a-form
:ref="el => setSwipeCellRef(el, '名字根据自己情况取')"
:rules="formModel.topTop.formRules"
:model="formModel.topTop.formModel"
:label-col="{ span: 8 }">
formRules: computed(() => {
let rules: any = {};
for (let i in state.formModel.topTop.formModel) {
rules[i] = state.formModel.topTop.formModel[i]?.rules
}
return rules
}),
二、setSwipeCellRef
setSwipeCellRef(el, index) {
if (el) {
swipeCellRefList.value[index] = el;
}
},
三、统一校验时
let flag;
for(let key in swipeCellRefList.value){
flag = await swipeCellRefList.value[key].validate()
}
if (!flag) return;
四、重置校验信息等
cancelLayer(){;
for(let key in swipeCellRefList.value){
swipeCellRefList.value[key].clearValidate()//重置校验信息
}
for(let key in state.formModel){
resetForm(state.formModel[key].formModel)//此方法自己写的,用于重置值
}
},
// 重置表单
export const resetForm = (formModel: any) => {
for (let i in formModel) {
let type = Object.prototype.toString.call(formModel[i].value).slice(8, -1);
if (type === "String") {
formModel[i].value = formModel[i].defaultValue || null;
} else if (type === "Array") {
formModel[i].value = formModel[i].defaultValue || [];
} else if (type === "Object") {
formModel[i].value = formModel[i].defaultValue || null;
} else if (type === "Number") {
formModel[i].value = formModel[i].defaultValue || null;
} else if (type === "Boolean") {
formModel[i].value = formModel[i].defaultValue || false;
}
}
};
五、自定义校验(eg:正则校验)
1.小例:手机号校验
phone: {
label: '电话',
value: '',
defaultValue: '',
placeholder:'请输入',
type: 'a-input',
rules: <Rule>[{required: true,validator:validReg,trigger:'blur',pattern:regPhone,message:'请输入正确的电话格式'}],
},
……
export const validReg = (_rule, item: any) => {
if (
item.value === "" ||
item.value === null ||
item.value === undefined ||
item.value.length === 0
) {
if(_rule.required) {
return Promise.reject("不能为空");
}
}else{
if(!_rule.pattern.test(item.value)) return Promise.reject(item.message || '请输入正确的格式~')
}
return Promise.resolve();
};
2.经纬度校验及非空校验
lnglat: {
label: '经纬度',
value: '',
defaultValue: '',
placeholder:'点击按钮选择..',
type: 'a-input-search',
rules: <Rule>[
{required: true,validator: validEmptyAndLngLat},
],
},
export const validEmptyAndLngLat = (_rule: Rule, item: any) => {
function validateCoordinate(type, value) {
function validate(value, coordinateRange) {
const numericValue = parseFloat(value);
return (
numericValue >= coordinateRange[0] && numericValue <= coordinateRange[1]
);
}
let valueArr = value.split(",");
if (valueArr.length < 2) {
return false;
} else {
let lngFlag = validate(valueArr[0], [-180, 180]);
let latFlag = validate(valueArr[1], [-90, 90]);
return lngFlag && latFlag;
}
}
// 若value值为0,则下列规则无法通过
if (
item.value === "" ||
item.value === null ||
item.value === undefined ||
item.value.length === 0
) {
return Promise.reject("不能为空");
} else {
if (!item.value || !validateCoordinate("longitude", item.value)) {
return Promise.reject("经纬度不合法");
}
}
return Promise.resolve();
};
原文地址:https://blog.csdn.net/weixin_59017683/article/details/140719841
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!