Проверка формы ReactJS Шведский номер социального страхования

Question

Я не понимаю, как реализовать проверку в reactjs форме пользовательского интерфейса материала. Я очень хорошо знаю Regex, но не понимаю, как реализовать проверку в форме, чтобы, если значение недопустимо, оно получало сообщение об ошибке:

Это Мой компонент;

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



    function App(props) {


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

      return (

        <React.Fragment>
                <FormGroup autoComplete="on">
                  <TextField
                    id=""
                    label="SSN"
                    value={values.ssn}
                    onChange={handleChange('ssn')}
                    type="number"
                    name='ssn'
                  />


                  <Button
                    onClick={() => onSubmit()}
                    variant="contained"
                    color="primary"
                  >
                    Save
                  </Button>
                </FormGroup>

        </React.Fragment>

      );
    }

    export default App;

МожетКто-нибудь поможет мне с проверкой шведского номера социального страхования?

Это пример шведского номера социального страхования: 300728-1243

Answer 1

шведский SSN

Это две части. Сначала это формат строки SSN. Затем идет контрольная сумма SSN.

Формат

Шведский SSN состоит из даты рождения , закодированной в 6 или 8 цифр, за которой следует дефис, за которым следует дефисЕще 4 номера. Например, 300728-1243 и 19300728-1243.

Принимая во внимание возможные значения года, месяца и дня, соответствующее регулярное выражение становится:

^(19|20)?\d{2}((0[1-9])|(1[012]))(([012][1-9])|(3[01]))-\d{4}$

Контрольная сумма

Последняя цифра является контрольной суммой, и она вычисляется из предыдущих 9 цифр (пропуская первые 2 для 12-значного варианта).

Контрольная сумма рассчитывается следующим образом:

1. Цифры поэлементно умножаются на 212121-212
2. Если какой-либо продукт состоит из двух цифр, его цифры добавляются.
3. Цифры суммируются.
4. Контрольная сумма - это последняя цифра 10 минус последняя цифра суммы.

Например (из Wikipedia ):

811228-987x:

8 * 2 = 16  1 + 6 = 7
1 * 1 =  1          1
1 * 2 =  2          2
2 * 1 =  2          2
2 * 2 =  4          4
8 * 1 =  8          8
9 * 2 = 18  1 + 8 = 9
8 * 1 =  8          8
7 * 2 = 14  1 + 4 = 5

          Sum:     46
Last digit of sum:  6
           10 - 6 = 4 
          Checksum: 4

670919-953x:

6 * 2 = 12  1 + 2 = 3
7 * 1 =  7          7
0 * 2 =  0          0
9 * 1 =  9          9
1 * 2 =  2          2
9 * 1 =  9          9
9 * 2 = 18  1 + 8 = 9
5 * 1 =  5          5
3 * 2 =  6          6

          Sum:     50
Last digit of sum:  0
          10 - 0 = 10
          Checksum: 0

Answer 2

Если вы хотите использовать проверку браузера, вы можете добавить атрибут pattern в свое поле, например:

<input name="sss" type="text" pattern="/^(19|20)?(\d{6}([-+]|\s)\d{4}|(?!19|20)\d{10})$/" />

В противном случае вы можете проверить свой ввод с помощью функции, подобной этой:

const sssRegex = /^(19|20)?(\d{6}([-+]|\s)\d{4}|(?!19|20)\d{10})$/

const validateSss = (sss) => sssRegex.test(sss);

console.log(validateSss("195505055555")) // true
console.log(validateSss("19550505-5555")) // true
console.log(validateSss("550505-5555")) // true
console.log(validateSss("550505 5555")) // true