如何让javascript只接受给定的正则表达式？答案

【问题标题】：How to make javascript only accept the given regular expressions?如何让javascript只接受给定的正则表达式？
【发布时间】：2019-08-15 17:22:23
【问题描述】：

我正在尝试用 javascript 制作一个表单来注册用户，其中一个字段是电话号码。

我有几个电话号码必须遵循的模式

它必须包含一个“+”，后跟一个从 1 到 999 的数字，然后是“(”，然后是一个从 1 到 999 的数字，然后是“)”，然后是至少 4 个从 0 到 9 的数字。

或

一个“+”后跟一个从 1 到 999 的数字，然后是从 0 到 9 的至少 4 位数字

或

至少 4 位从 0 到 9。

您可以将任何电话号码保存在表单中，但如果您介绍的电话号码与这些模式不同，则应显示一条消息以警告您（警告部分有效）。

这是我做的javascript函数

<script type="text/javascript">
    function checkPhone() {
        var numberPattern1 = new RegExp("\\+[0-9]{1,3}[0-9]{4,}");
        var numberPattern2 = new RegExp("\\+[0-9]{1,3}\\([0-9]{1,3}\\)[0-9]{4,}");
        var numberPattern3 = new RegExp("[0-9]{4,}");
        var phone = document.getElementById("phone");
        var test1 = numberPattern1.test(phone.value);
        var test2 = numberPattern2.test(phone.value);
        var test3 = numberPattern3.test(phone.value);
        var match = test1 || test2 || test3;
        if (!match) {
            var test = alert("<spring:message code = 'number.dont.match'/>");
        }
    }
</script>

这是我调用该函数的表单部分

<form:label path="phone">
        <spring:message code="reviewer.phone" />:
    </form:label>
    <form:input path="phone" id="phone" onChange="checkPhone()" />
    <form:errors cssClass="error" path="phone" />

我希望它接受这样的字符串（并且代码接受它们）

+23758976540
+456(542)3845
987645907
6543
+66734
+567(1)9388

并且还使用这些字符串发出警告

456
fsdfsdfhge
+0(0)4567
+65(4956)3456

问题是当我输入类似的东西时它没有警告我

+1234 //(it should have at least one more digit)
++1245
+65(4956)3456 //(Can't have more than 3 numbers in the parenthesis)
+0(0)4567 //(the number after the "+" and from the parenthesis must be at least 1)
aaaaaaaaaa8888aaaaaaaaaa
aaaaa+45(867)86543
jguosfoafos+339999oiajdiajdsi

看起来它匹配任何字符串，只要它有4位数字，就像最后一个模式一样，我认为问题是由于正则表达式，但我不太确定。如果整个字符串与模式不匹配，我应该怎么做才能收到警告？

【问题讨论】：

标签： javascript regex spring forms

【解决方案1】：

使用^ 和$ 调整正则表达式以说明字符串的开头和结尾：

function checkPhone() {
    var numberPattern1 = new RegExp("^\\+[0-9]{1,3}[0-9]{4,}$");
    var numberPattern2 = new RegExp("^\\+[0-9]{1,3}\\([0-9]{1,3}\\)[0-9]{4,}$");
    var numberPattern3 = new RegExp("^[0-9]{4,}$");
    var phone = document.getElementById("phone");
    var test1 = numberPattern1.test(phone.value);
    var test2 = numberPattern2.test(phone.value);
    var test3 = numberPattern3.test(phone.value);
    var match = test1 || test2 || test3;
    if (!match) {
        var test = alert("<spring:message code = 'number.dont.match'/>");
    }
}

示例：

    function checkPhone(phone) {
        var numberPattern1 = new RegExp("^\\+[0-9]{1,3}[0-9]{4,}$");
        var numberPattern2 = new RegExp("^\\+[0-9]{1,3}\\([0-9]{1,3}\\)[0-9]{4,}$");
        var numberPattern3 = new RegExp("^[0-9]{4,}$");
        var test1 = numberPattern1.test(phone);
        var test2 = numberPattern2.test(phone);
        var test3 = numberPattern3.test(phone);
        var match = test1 || test2 || test3;
        if (!match) {
            var test = alert("<spring:message code = 'number.dont.match'/>");
        }
    }
    
    checkPhone("+1234");

【讨论】：

@rayo329：这是匹配+0000000000000000，000000000000，+0(0)0000000000000000000000
@Toto 是的，但这就是 RegEx 规定要做的事情。如果 OP 有长度问题，那么所有这些的结尾都不会是 { 4 , }
OP 说：'它必须包含一个“+”，后跟一个从 1 到 999 的数字，然后是“（”，然后是一个从 1 到 999 的数字，然后是“）”'，第一个数字不应该成为0
@Toto 我明白你的意思，不幸的是我无法删除这个答案，但我稍后会尝试更新它。令人惊讶的是，OP 没有将其作为评论指出。

【解决方案2】：

正则表达式测试函数尝试在给定字符串中查找正则表达式模式，它可能是子字符串。要匹配整个字符串，您可以在正则表达式的开头和结尾指定 start('^') 和 finish('$') 字符。

所以你的模式应该是这样的

"^\\+[0-9]{1,3}[0-9]{4,}$"
"^\\+[0-9]{1,3}\\([0-9]{1,3}\\)[0-9]{4,}$"
"^[0-9]{4,}$"

参考https://javascript.info/regexp-anchors

【讨论】：