redux 使用Material UI进行ReactJS动态表单验证

tkclm6bt 于 2023-05-18 发布在 React

关注(0)|答案(2)|浏览(175)

我正在经历验证表格的麻烦。我的表格在下面给出，这是最小的可复制的。
我使用React Material UI作为表单。

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { FormGroup } from '@material-ui/core';

function App(props) {
  const validator = {
    number: {
      rules: [
        {
          test: /([\d]+)/,
          message: 'numaric must contain only numeric characters',
        },
        {
          test: (value) => {
            return value.length > 5;
          },
          message: 'phone must be longer than five characters',
        },
      ],
      errors: [],
      valid: false,
      state: '',
    },
  };

  const [values, setValues] = React.useState({
    ssn: '',
    phone: '',
    email: '',
    country: '',
  });


  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

return (
  <React.Fragment>
  <div>
    <FormGroup autoComplete="on">
      <TextField
        id=""
        label="Phone"
        value={values.phone}
        onChange={handleChange('phone')}
        type="number"
        validators={validator}
        name='phone'
      />
    </FormGroup> 
  </div>
  </React.Fragment>

  );
}

export default App;

我希望如果用户插入小于5的值，他们会得到一个错误消息，如果他们不插入数字，他们会得到另一个错误消息。
我正在经历麻烦来实现这个简单的验证
我需要帮助，如果有人能在这件事上帮助我，那就太好了。
我已经用正则表达式写了一个验证器，但我不知道如何实现它来显示错误消息。
有人能帮帮我吗？

redux

来源：https://stackoverflow.com/questions/58523321/reactjs-dynamic-form-validation-with-material-ui

2条答案

按热度按时间

gg58donl1#

我有一个类似的情况下，我需要测试，如果文本字段是空的。我在material-ui中做了下面的方式。你有错误和helpertext可以做验证和显示各自的消息。
材质用户界面文本字段验证

<TextField
    required
    id="flowName"
    name="name"
    label="Flow Name"
    variant="outlined"
    value={name}
    error={name !== ""}
    helperText={name !== "" ? "Required!" : " "}
/>

并检查phoneNumber长度变化

error={values.phone.length < 5}
helperText={values.phone.length < 5 ? "Phone must be longer than five characters!" : " "}

赞(0）回复(0）举报 2023-05-18

7gyucuyw2#

我们可以通过以下方式验证表单值数组

const rows = [
{
    "checked": false,
    "data": {
        "requestType": "Tom",
        "accountName": "",
    },
    "formDesc": {
        "accountName": {
            "field_label": "MF/Sub Account Name",
            "field_name": "accountName",
            "is_editable": "Y",
            "is_mandatory": "Y"
        },
        "address1": {
            "field_label": "RequestType",
            "field_name": "requestType",
            "is_editable": "Y",
            "is_mandatory": "N"
        }
    },
    "isCollapsed": false,
    "validationErrors": [ ]
}
]

const validate = rows => {
    let isValid = true
    const validatedRows = rows.map(row => {
        const validationErrors = []
        const formDesc = row.formDesc
        for (const r in formDesc) {
            if (formDesc[r].is_mandatory === 'Y' && !row.data[r]) {
                isValid = false
                validationErrors.push({
                    errorMessage: `${formDesc[r].field_label} is required`,
                    field: r
                })
            }
        }
        const rowWithValidation = {
            ...row,
            validationErrors: validationErrors,
        }
        return rowWithValidation
    })
    return { isValid, validatedRows }
}

console.log(validate(rows))

赞(0）回复(0）举报 2023-05-18

我来回答

redux 使用Material UI进行ReactJS动态表单验证

2条答案

相关问题

热门标签

最新问答