antd Form中getFieldDecorator校验不能输入空字符和特殊字符

最新推荐文章于 2024-05-17 15:07:57 发布

马娟

最新推荐文章于 2024-05-17 15:07:57 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： antd

本文链接：https://blog.youkuaiyun.com/weixin_41077029/article/details/103632939

antd 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种针对表单中单价字段的验证方法，确保输入的数值在0到99之间，并保留两位小数，同时检查特殊字符的非法输入。通过自定义验证规则和正则表达式的结合使用，实现了对输入数据的有效性和格式的双重检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


 //校验大于0小于等于99的数
 checkNum = (rule, value, callback) => {
   let x = value -0
   if(x >= 0 && x <= 99){
    let a = new RegExp(/^\d+(\.\d{1,2})?$/)
    if(!a.test(x)){
      return  callback("请保留两位小数");
    }
    return  callback();
   }else{
   return  callback("请输入小于等于99的数并保留两位小数");
  }
}
<Form.Item label="单价：">
              {getFieldDecorator('unitPrice', { 
                  rules: [
                    { validator: this.checkNum },
                    {required: true, message: '请设置单价'},
                    { validator: (rule, value, callback) => {
                        try {
                            if (value&&value.trim()=="") {
                              callback("必填，请输入");
                            }
                            callback();
                        } catch (err) {
                            callback(err);
                        }
                    }},
                    { validator: (rule, value, callback) => {
                    let reg =new RegExp("[`~!%@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）|{}【】‘；：”“'\"。，、？]");
                      if(reg.test(value)){
                         return callback("不能输入该特殊字符")
                      }else{
                         return callback();
                      }
                   }},
                  ],
                  initialValue: rowData?rowData.unitPrice:""
                })(<Input
                    placeholder="请设置单价"
                />)}
            </Form.Item>