表单校验总结

邮箱

{
    pattern: /^\w[-\w.+]*@([-_A-Za-z0-9]+\.)+[A-Za-z][-_A-Za-z]{1,14}$/,
    message: '邮箱格式不正确',
    trigger: 'blur'
},

身份证号码

{
    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    message: "请输入正确的身份证号",
    trigger: "blur",
},

手机号

{
     pattern: /^1\d{10}$/,
     message: "手机号格式不正确",
     trigger: "blur",
},

只可输入阿拉伯数字

{
    required: true,
    pattern: /^[0-9]+$/g,
    message: "请输入阿拉伯数字",
    trigger: "blur",
},

字母数字密码8-20位

{
    pattern: /^(?=.*[A-Za-z])(?=.*\d)[^\u4e00-\u9fa5]{8,20}$/,
    message: '密码必须且只能包含字母和数字',
    trigger: 'blur'
},

密码包含大小写和数字，不少于8位

{ 
    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/, 
    message: '密码包含大小写和数字，不少于8位', 
    trigger: 'blur' 
},

包含数字、字母大写及小写、特殊字符，长度8-16位

{ 
    pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,16}$/, 
    message: '密码8到16位，含字母大写及小写、数字和特殊字符', 
    trigger: 'blur' 
},

包含数字、字母、特殊字符，长度8-16位

{ 
    pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,16}$/,
    message: '密码8到16位，含字母、数字和特殊字符', 
    trigger: 'blur' 
},

长度8-20位

{
    pattern: /^.{8,20}$/,
    message: '长度在 8 到 20 个字符',
    trigger: 'blur'
},

用户名支持字母、数字、横线- 、下划线 _ ，但不支持全数字

{
    pattern: /^(?!(\d+)$)[\w-]+$/,
    message: '用户名支持字母、数字、横线- 、下划线 _ ，但不支持全数字',
    trigger: 'blur'
},

角色名称为中文+英文字符，最多20个字符

{ 
    required: true,pattern: /^([a-zA-Z\u4E00-\u9FA5]){1,20}$/, 
    message: '角色名称为中文+英文字符，最多20个字符', 
    trigger: 'blur' 
},

金额限制

const regAcountFun = (rule, value, callback, name, len = 99999999.99) => {
    if (value > len) {
        callback(new Error(`${name}最多不能超过99999999.99`));
    } else {
        callback();
    }
};
acount: [
    { required: true, message: '单日总额限制不能为空', trigger: 'blur' },
    { required: true,pattern: /(^[0-9]([0-9]+)?(\.[0-9]+)?$)/g, message: '只支持阿拉伯数字', trigger: 'blur' },
    { required: true, validator: (rule, value, callback) => regAcountFun(rule, value, callback, '单日总额限制', 99999999.99), trigger: 'blur' }
],

金额小数点限制

参考： https://blog.csdn.net/xuqipeter/article/details/79178877

{
    required: true,
    pattern: /^[0-9]+$/g,
    message: "只支持阿拉伯数字，且只能为正数",
    trigger: "blur",
},
{
    required: true,
    pattern: /(^[0-9]([0-9]+)?(\.[0-9]{1,2})?$)/g,
    message: "只支持阿拉伯数字，且不能超过2位小数",
    trigger: "blur",
},


// 正小数，小数点后两位，数值最前不能有0。 //'(\.[0-9]{1,2})?$)'修改其中的'2'，可以改变小数点后位数的验证
var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
var money = "520.100";
console.log(reg.test(money));//true
//000 错 //0 对 //0. 错 //0.0 对 //050 错 //00050.12错 //70.1 对 //70.11 对 //70.111错 //500 正确 

密码修改确认密码校验

let checkConfirmPassword = function (rule, value, callback) {
  const {
    ruleForm: { newPassword, confirmPassword },
  } = this;
  return newPassword === confirmPassword;
};


confirmPassword: [
  {
    required: true,
    message: "请输入新密码",
    trigger: "blur",
  },
  {
    pattern: /^.{6,20}$/,
    message: "长度在 6 到 20 个字符",
    trigger: "blur",
  },
  {
    validator: checkConfirmPassword.bind(this),
    trigger: "submit",
    message: "确认密码与新密码不一致,请确认",
  },
],


## 密码必须是大写字母、小写字母、数字和特殊字符组成，且长度为8到20位
 {
                    pattern: /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/,
                    message: '密码必须是大写字母、小写字母、数字和特殊字符组成，且长度为8到20位',
                  },

react

  const [form] = Form.useForm();
  //  密码验证
  const passwordValidator = (rule: any, value: any, callback: any) => {
    const { getFieldValue } = form;
    if (value === '') {
      callback('请输入新密码');
    }
    if (!/^\d{8,20}$/.test(value)) {
      callback('长度在 8 到 20 个字符');
    }
    if (value && value !== getFieldValue('password')) {
      callback('两次输入不一致！');
    }
    // 必须总是返回一个 callback，否则 validateFields 无法响应
    callback();
  };


<Form.Item
  name="password"
  initialValue={''}
  validateTrigger="onBlur"
  rules={[
    { required: true, message: '请输入新密码' },
    {
      pattern: /^.{8,20}$/,
      message: '长度在 8 到 20 个字符',
    },
  ]}
>
  <Input.Password placeholder="6-16位新密码" />
</Form.Item>
<Form.Item
  name="passwordCon"
  initialValue={''}
  validateTrigger="onBlur"
  rules={[
    {
      validator: passwordValidator,
    },
  ]}
>
  <Input.Password placeholder="确认新密码" />
</Form.Item>