javascript 使用“是”验证电话号码

o4tp2gmn  于 2022-10-30  发布在  Java
关注(0)|答案(8)|浏览(252)

我在验证一个电话号码

phone: Yup.number()
  .typeError("That doesn't look like a phone number")
  .positive("A phone number can't start with a minus")
  .integer("A phone number can't include a decimal point")
  .min(8)
  .required('A phone number is required'),

.min(8)会验证数字是否大于等于8。因此,只需输入8即可通过。如何使1000 0000通过所需的8个字符?

uhry853o

uhry853o1#

嗨,现在我正在解决和你一样的问题,我找到了可能的解决方案。

使用与Regex匹配的字符串验证电话号码

const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/

phoneNumber: Yup.string().matches(phoneRegExp, 'Phone number is not valid')

您可以搜索不同的Regex表达式并对其进行验证。

vjhs03f7

vjhs03f72#

更新。〈**
http://yup-phone.js.org/
我已经创建了一个yup-phone模块,它使用google-libphonenumber提供精确的验证检查,并且可以直接从github安装

  • npm install --save yup yup-phone*.

检查Usage

const Yup = require('yup');
require('yup-phone');

// validate any phone number (defaults to India for country)
const phoneSchema = Yup.string().phone().required();
phoneSchema.isValid('9876543210'); // → true

简单React验证器
用于电话号码验证的正则表达式为

/^(\+?\d{0,4})?\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{4}\)?)?$/

示例

第一个

vzgqcmou

vzgqcmou3#

试试这个,它可能对你有帮助。

移动的:是的.string().matches(/^[6-9]\d{9}$/,{消息:“请输入有效数字。",excludeEmptyString:错误})

9rbhqvlz

9rbhqvlz4#

const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/

phone_number: Yup.string()
  .required("required")
  .matches(phoneRegExp, 'Phone number is not valid')
  .min(10, "too short")
  .max(10, "too long"),

这对我来说最好...你可以设置你自己的长度...我只是想要10位数,不是更少或更多

rta7y2nd

rta7y2nd5#

只是一个小小的合作。在我的情况下,我不想验证输入是否为空(当不是必需的)。谢谢大家的例子!

yup.addMethod(yup.string, "phone", function(messageError = 'Phone number is not valid') {
    const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/
    return this.test('phone', messageError, value => {
      if (value && value.length > 0) {
        return phoneRegExp.test(value)
      }
      return true
    })
})
aydmsdu9

aydmsdu96#

我有一个类似的使用案例,下面是我的解决方案:

// Regex source: https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s02.html

const phoneRegex = RegExp(
  /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/
);

const schema = yup.object().shape({
  phone: yup.string().matches(phoneRegex, "Invalid phone").required("Phone is required")
});
8xiog9wr

8xiog9wr7#

我为这个做了一个新的包,叫做yup-phone-lite。我用的是原来的yup电话包,但是它使用了大量的google-libphonenumber,所以我用一个更小的叉子代替了它。

ee7vknir

ee7vknir8#

下面是我的代码片段。

let schema = yup.object().shape({
  phone: yup
    .string()
    // regexr.com/6anqd
    .matches(/(\+91\ )[6-9]{1}[0-9 ]{4}[0-9 ]{4}[0-9]{3}/, {
      message: "Invalid Indian number",
      excludeEmptyString: false,
    })
    .required(),
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
  confirmPassword: yup
    .string()
    .required()
    .oneOf([yup.ref("password")], "Passwords do not match"),
  agree: yup
    .boolean()
    .oneOf(
      [true],
      "It is essential to accept our Privacy Policy to register.",
    ),
});

My regex检查印度电话号码是否符合+91 axxx xxx xxx(其中a可以是6到9之间的数字,x可以是0 - 9)。
我尝试了X1 E1 F1 X,但它无法实际验证我想要的印度号码的范围,另外,包导入大小是昂贵的。
此外,我还在前端使用ReactwithFormik,通过react-phone-input-2进行表单验证

<PhoneInput
  country={"in"}
  value={values.phone}
  name="phone"
  onChange={(phone, data, e) => handleChange(e)}
  onBlur={(e) => handleBlur(e)}
  defaultMask=".... ... ..."
  masks={{ in: ".... ... ..." }}
  onlyCountries={["in"]}
  inputProps={{
    name: "phone",
    required: true,
    autoFocus: true,
  }}
  disableSearchIcon={true}
  disableDropdown={true}
  containerClass="mt-1 border h-12 text-sm focus:outline-none block w-full bg-gray-100 dark:bg-transparent border-transparent focus:bg-white"
  inputClass="mt-1 border h-12 text-sm focus:outline-none block w-full bg-gray-100 dark:bg-transparent border-transparent focus:bg-white"
  inputStyle={{
    background: "transparent",
    border: "1px solid grey",
    height: "3em",
    width: "100%",
    outline: "none",
  }}
  buttonStyle={{
    height: "3em",
    background: "transparent",
    outline: "none",
    border: "none",
  }}
/>
{handleFormikError(errors, touched, "phone")} // returns the span.alert with error message

相关问题