antd_使用Input封装实现Form校验效果(最终版)

六卿

2024-03-26 帮助1人

antd_使用Input封装实现Form校验效果

目前前端UI框架使用的Ant.design。
目前做的PC项目上没有使用Form表单验证，用的是单独的Input输入框。所以每一都需要进行繁琐的校验。

可以看一下这两个的区别：

Form : https://ant.design/components/form-cn/
Input : https://ant.design/components/input-cn/

所以想在点击提交的时候一键验证，由此，再次封装了一下原有的Input组件，
唯一增加的是加了Input输入框的效验功能。

思路：

在页面初始化的时候收集每一个Input输入框需要校验的标识，在页面点击按钮的时候，对上方Input进行规则效验。
相比较之前多了一个回调函数和具体属性；

界面展示：

学新通

	require: false,//是否显示 红色必填星号
	isrequired: false,//必填
    isnumber: false,//数字
    isip: false,//IP
    isemail: false,//邮箱
    isphone: false,//手机号
    isidcard: false,//身份证号
    isdomain: false,//域名

Input使用：

引入：

import InputPlus, { check} from '../../component/strongCom/InputPlus'

必填：

	<InputPlus
         isrequired
         require
         placeholder="请输入"
         title="姓名"
         value={server_ip}
         onChange={(e) => { this.inputName('server_ip', e) }} />

填，校验；不填，不校验：

	<InputPlus
       isnumber
       placeholder="请输入"
       title="年龄"
       value={mgs_sendmail}
       onChange={(e) => { this.inputName('mgs_sendmail', e) }} />

提交事件：

	 buttonDefaultFun = async () => {
	        if (!check()) return
	        alert("通过效验了")
	//....
	//提交接口即可      
    }

封装代码：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2021-09-27 18:21:51
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-05-16 17:01:43
 */

import React, { useEffect, memo } from 'react';
import { Input, message } from 'antd';
import 'antd/dist/antd.css';
import '../../styles/search.less';
import { checkNumberFun, myselfCheckIpFun, checkDomainFun, IsEmail, checkPhoneFun, checkIDCardFun } from './utilsFun/toolFunctions'
import { UtilPlus, ParentHOC } from './utilsFun/utilsFun'
export const check = UtilPlus.check

const InputPlus = (props) => {
    // 触发函数
    const mySelfPropsIsrequiredfun = (whowFlag, title, messaged, ) => {
        UtilPlus.isRequiredList = UtilPlus.IsCheckPlusFun(UtilPlus.isRequiredList, {
            whowFlag,
            messaged,
            title,
        })
    }

    // 必填
    const mySelfIsrequiredfun = () => {
        mySelfPropsIsrequiredfun('isrequired', props.title, () => {
            if (!props.value) {
                message.warning("请输入"   props.title)
                return false
            }
            return true
        })
    }

    // 数字
    const mySelfIsnumberfun = () => {
        mySelfPropsIsrequiredfun('isnumber', props.title, () => {
            if (props.value && !checkNumberFun(props.value)) {
                message.warning(props.title   "：请输入数字")
                return false
            }
            return true
        })
    }

    // IP
    const mySelfIsIPfun = () => {
        mySelfPropsIsrequiredfun('isip', props.title, () => {
            if (props.value && !myselfCheckIpFun(props.value)) {
                message.warning(props.title   "：请输入正确IP格式")
                return false
            }
            return true
        })
    }

    // 邮箱
    const mySelfIsemailfun = () => {
        mySelfPropsIsrequiredfun('isemail', props.title, () => {
            if (props.value && !IsEmail(props.value)) {
                message.warning(props.title   "：请输入正确邮箱格式")
                return false
            }
            return true
        })
    }

    // 手机
    const mySelfIsphonefun = () => {
        mySelfPropsIsrequiredfun('isphone', props.title, () => {
            if (props.value && !checkPhoneFun(props.value)) {
                message.warning(props.title   "：请输入正确手机格式")
                return false
            }
            return true
        })
    }

    // 身份证号
    const mySelfIsidcardfun = () => {
        mySelfPropsIsrequiredfun('isidcard', props.title, () => {
            if (props.value && !checkIDCardFun(props.value)) {
                message.warning(props.title   "：请输入正确身份证号")
                return false
            }
            return true
        })
    }

    // 域名
    const mySelfIsdomainfun = () => {
        mySelfPropsIsrequiredfun('isdomain', props.title, () => {
            if (props.value && !checkDomainFun(props.value)) {
                message.warning(props.title   "：请输入正确域名")
                return false
            }
            return true
        })
    }


    // 校验函数
    const checkFun = () => {
        // 是否必填
        if (props.isrequired) {
            mySelfIsrequiredfun()
        }

        // 其他一切校验都是在input有值的时候才会进行

        // 数字校验
        if (props.isnumber) {
            mySelfIsnumberfun()
        }

        // IP校验
        if (props.isip) {
            mySelfIsIPfun()
        }

        // 邮箱
        if (props.isemail) {
            mySelfIsemailfun()

        }
        // 手机号
        if (props.isphone) {
            mySelfIsphonefun()

        }
        // 身份证号码
        if (props.isidcard) {
            mySelfIsidcardfun()
        }
        // 域名
        if (props.isdomain) {
            mySelfIsdomainfun()
        }
    }

    useEffect(() => {
        checkFun()
    }, [props.value])

    let { require, title,
        // 解构出来不是为了用，为了截胡，不让他传给下一个子级
        messaged, isrequired, isnumber, isip, isemail, isphone, isidcard, isdomain,
        titleStyle, onDoubleClickOnTitleFun,  ...rest } = props;
    return (
        <div className="input">
            {title && <p style={titleStyle} onDoubleClick={onDoubleClickOnTitleFun} className="input-title">{title   "："}</p>}
            <Input
                {...rest}
                className="input-input"
            />
            {require && <span style={{ color: '#ff7875', fontSize: '12px', marginTop: '8px', marginLeft: '8px' }}>*</span>}
        </div>
    )
}

InputPlus.defaultProps = {
    onDoubleClickOnTitleFun: () => { },
    require: false,
    isrequired: false,//必填
    isnumber: false,//数字
    isip: false,//数字
    isemail: false,//邮箱
    isphone: false,//手机号
    isidcard: false,//身份证号
    isdomain: false,//域名
}

export default memo(ParentHOC(InputPlus));

utilsFun.js

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-27 10:52:08
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-05-13 16:55:05
 */
import React from 'react'

// 过滤校验函数
export const UtilPlus = {
    IsCheckPlusFun: (isRequiredList, obj) => {
        if (!isRequiredList) {
            isRequiredList = []
        }
        const filterArr = isRequiredList.filter(item => item.title === obj.title && item.whowFlag === obj.whowFlag)
        if (filterArr.length === 0) {
            // 不存在
            isRequiredList = [...isRequiredList, obj]
        } else {
            // 存在的话：
            isRequiredList = isRequiredList.map(item => {
                if (item.title === obj.title && item.whowFlag === obj.whowFlag) {
                    item.messaged = obj.messaged
                }
                return item
            })
        }
        return isRequiredList;
    },
    check: (isRequiredList = UtilPlus.isRequiredList) => {
        for (const iterator of isRequiredList) {
            if (!iterator.messaged()) {
                return false
            }
        }
        return true
    },
    isRequiredList: [],
    clearisRequiredListFun: () => UtilPlus.isRequiredList = []
}

export const ParentHOC = (Com) => {
    return class Test extends React.Component {
        componentWillMount() { UtilPlus.isRequiredList.length !== 0 && UtilPlus.clearisRequiredListFun() }
        render() {
            return <Com {...this.props} />
        }
    }
}

toolFunctions.js

/**
 * 支持负数 0 正数   整数
 * @param {*} num 
 */
export const checkNumberFun = (num) => {
    const reg = /^(-)?[0-9]\d*(\.\d )?$/
    return reg.test(num)
}
/**
 * 
 * @param {} port  要验证的端口
 * @returns boolean  
 */
export const CheckPortFun = (port) => {
    const reg = /^[1-9]\d*$/
    return reg.test(port) && 1 <= 1 * port && 1 * port <= 65535
}
/**
 * 大于0 即可
 * @param {*} port 
 */
export const CheckNumGreaterThan0Fun = (num) => {
    const reg = /^[1-9]\d*(\.\d )?$/
    return reg.test(num) && num > 0
}
/**
 * 验证数字 大于 0 
 * @param {*} port 
 */
export const CheckNumFun = (port) => {
    const reg = /^[1-9]\d*$/
    return reg.test(port) && 1 <= 1 * port
}
/**
 * 
 * @param {*} IPV6
 * @returns boolean
 */
export const myselfCheckIsIPv6 = (IPV6) => {
    const ipV6Pattern = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%. )?\s*$/
    return IPV6 && ipV6Pattern.test(IPV6);
}
//v4 and v6
function validateIP(str) {
    return /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$|^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%. )?\s*$/.test(str);
}
/**
 * 
 * @param {} IPV4  要验证的IP 
 * @returns boolean  
 */
export const myselfCheckIpFun = (IPV4) => {
    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    return IPV4 && reg.test(IPV4)
}
/**
 * 验证邮箱
 * @param {*} str 
 * @returns boolean
 */
export const IsEmail = (str) => {
    const reg = /^[0-9a-zA-Z_.-] [@][0-9a-zA-Z_.-] ([.][a-zA-Z] ){1,2}$/;
    return str && reg.test(str);
}
// 域名
export const checkDomainFun = (domain) => {
    // const reg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}) $/
    const reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}) \.?/
    return domain && reg.test(domain)
}
// 身份证号
export const checkIDCardFun = (idCard) => {
    const reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    return idCard && reg.test(idCard)
}
// 手机号
export const checkPhoneFun = (phone) => {
    const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
    return phone && reg.test(phone)
}

这篇好文章是转载于：学新通技术网

antd_使用Input封装实现Form校验效果(最终版)

antd_使用Input封装实现Form校验效果

可以看一下这两个的区别：

思路：

界面展示：

Input使用：

引入：

必填：

填，校验；不填，不校验：

提交事件：

封装代码：

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐