模拟form表单离焦校验判断input框中是否有值【react】

需求:多个input输入框,对其进行遍历,校验每一个输入框,判断输入框是否有值

  1. 定义挂载对象
const liRefList = useRef([]); // 文本框挂载
  1. 挂载对象的方法
const getRef = (dom: never) => {
    liRefList.current.push(dom);
  };
  1. 离焦校验方法
 const handlerShow = (e: any, index: number) => {
    if (!e.target.value && state.tableListDataSource[index].checked) {
      state.tableListDataSource[index].tagValueList = undefined;
    }
  };
  1. 点击获焦方法
 const addTextChange = (e: any, record: any, type: number, indexs: number) => {
    //const index = state.tableListDataSource.findIndex(
      //(item: { key: number }) => item.key == +record.key,
    //);
    //const tableListDataSourceTemp = state.tableListDataSource;
    if (type === 1) {
      if (e.target.checked) {
        liRefList.current.map(
          (item: any) =>
            item &&
            item.props.id == indexs &&
            item.focus({
              cursor: 'start',
            }),
        );
        //tableListDataSourceTemp[index].checked = true;
        //tableListDataSourceTemp[index].tagValueList = [];
      } else {
        //tableListDataSourceTemp[index].checked = false;
        //tableListDataSourceTemp[index].tagValueList = [];
      }
    }
}
  1. input框
 <div>
    {dataList.map((record)=>(
        <div>
           <Checkbox
             checked={record.checked}
             onChange={(e) => {
               addTextChange(e, record, 1, index);
             }}
             style={{ marginBottom: 0, marginTop: 0 }}
           />
           <Input
             id={index + ''}
             onBlur={(e) => handlerShow(e, index)}
             ref={getRef}
             value={
               record.tagValueList !== undefined && record.tagValueList.length > 0
                 ? record.tagValueList[0].label
                 : ''
             }
             placeholder='请输入文本'
             onChange={(e) => {
               addTextChange(e, record, 2, index);
             }}
             allowClear
             style={{
               marginLeft: '8px',
               border:
                 (record.checked && record.tagValueList === undefined) 
                   ? '1px solid #f22436'
                   : '1px solid #d9d9d9',
             }}
           />
        </div>
    ))}
 </div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Ant Design中的Form表单中,可以使用`rules`属性来进行正则校验。具体实现步骤如下: 1. 在需要进行校验的表单项中,设置`rules`属性,值为一个数组,数组中每个元素为一个校验规则对象,校验规则对象包括`pattern`属性和`message`属性,分别表示正则表达式和校验失败的提示信息。例如: ```jsx <Form.Item label="用户名" name="username" rules={[ { pattern: /^[a-zA-Z0-9_]{4,16}$/, message: '用户名必须由4-16位字母、数字或下划线组成', }, ]} > <Input /> </Form.Item> ``` 2. 在表单提交时进行校验。可以通过`validateFields`方法来获取所有表单项的值,并进行校验。如果校验通过,执行提交操作;否则,提示用户校验失败的原因。例如: ```jsx const onFinish = (values) => { form .validateFields() .then(() => { // 校验通过,执行提交操作 console.log('提交表单:', values); }) .catch((errorInfo) => { // 校验失败,提示用户 console.log('校验失败:', errorInfo); }); }; ``` 注意:在使用`validateFields`方法时,需要将表单组件用`Form.useForm`包装起来,并将`form`对象传递给表单组件的`form`属性。例如: ```jsx const MyForm = () => { const [form] = Form.useForm(); const onFinish = (values) => { form .validateFields() .then(() => { // 校验通过,执行提交操作 console.log('提交表单:', values); }) .catch((errorInfo) => { // 校验失败,提示用户 console.log('校验失败:', errorInfo); }); }; return ( <Form form={form} onFinish={onFinish}> {/* ... */} </Form> ); }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值