开发中常用的正则表单校验

登录页账户支持字母、数字和下划线#

<Form.Item
  name="username"
  rules={[
    {
      required: true,
      message: "请输入账户",
    },
    {
      pattern: new RegExp(/^[0-9a-zA-Z_]+$/, "g"),
      message: "支持字母、数字和下划线",
    },
    { max: 30, message: "最多30个字符" },
  ]}
>
  <Input
    prefix={<UserOutlined />}
    onChange={handleChange}
    placeholder="请输入账户"
  />
</Form.Item>

账号必须字母或数字#

\w匹配字母或数字

{
  pattern: new RegExp('^\\w+$', 'g'),
  message: '账号必须字母或数字'
}

名称只能输入中文、字母、下划线#

{
  pattern: new RegExp('^[\u4e00-\u9fa5_a-zA-Z0-9]+$', 'g'),
  message: '名称不符合要求'
}

登录页密码支持数字、大小写字母、6-18 位字符#

<Form.Item
  name="password"
  rules={[
    { required: true, message: "请输入密码!" },
    {
      pattern: new RegExp(/^[0-9a-zA-Z]{6,18}$/, "g"),
      message: "6~18个字符，支持数字、大小写字母",
    },
  ]}
>
  <Input
    prefix={<LockOutlined />}
    type="password"
    autoComplete="off"
    onChange={handleChange}
    placeholder="请输入密码"
  />
</Form.Item>

数字类型#

\d 匹配一个数字字符。等价于 [0-9] *匹配前面的子表达式零次或多次。要匹配 *字符，请使用\*

<Form.Item
  name="userCode"
  label="编号"
  rules={[
    { required: true, message: "请输入" },
    { max: 10, message: "最多10个字符" },
    {
      pattern: new RegExp(/^\d*$/, "g"),
      message: "编号必须数字类型",
    },
  ]}
>
  <Input placeholder="请输入" />
</Form.Item>

手机号验证#

?匹配前面的子表达式零次或一次 {n}n 是一个非负整数。匹配确定的 n 次

<Form.Item
  name="mobile"
  label="手机"
  rules={[
    { required: false, message: "请输入" },
    {
      pattern: new RegExp(/(?:0|86|\+86)?1[3456789]\d{9}$/, "g"),
      message: "请输入准确的手机号码",
    },
  ]}
>
  <Input placeholder="请输入" />
</Form.Item>
// 或
{
  pattern: new RegExp('^[1][1,3,4,5,6,7,8,9][0-9]{9}$', 'g'),
  message: '请输入有效手机号码'
}

大于 0 正整数#

{
  pattern: new RegExp('^[1-9]*[1-9][0-9]*$', 'g'),
  message: '必须为大于0正整数'
},