Question

我在HTML5中使用以下代码来验证某些名称

<input name="desiredNames" type="text" placeholder="your-site-name" pattern="[a-z0-9\-\.]{3,25}" id="desiredNames">

它有效，但我想使用正则表达式添加额外的检查功能，如下所示： 1.该名称不允许以签名期开始。或减号 - 2.姓名不得以签名期结束。或减号 -

我不知道如何使用^，$，？使这些发生。（我尝试了一些在论坛中看到的例子）对于那个html代码，我有以下的js代码

(function checkName() {

let wantedNames = document.getElementById('desiredNames');
let form = document.getElementById('form');
let elem = document.createElement('div');
        elem.id = 'notify';
        elem.style.display = 'none';

        form.appendChild(elem);

wantedNames.addEventListener('invalid', function(event){
    event.preventDefault();
    if ( ! event.target.validity.valid ) {
        wantedNames.className    = 'invalid animated shake';
        elem.textContent   = 'Name can contains small letters, numbers, dot . and minus -,but not at the beginning or at the end, ie escu.ionel-74';
        elem.className     = 'error';
        elem.style.display = 'block';
    }
});

wantedNames.addEventListener('input', function(event){
    if ( 'block' === elem.style.display ) {
        wantedNames.className = '';
        elem.style.display = 'none';
    }
});

}）（）;

有关正则表达式模式的任何提示和一些好资源吗？

THX

Answer 1

有很多方法可以实现这一点，但最短的方法是在两端添加\b字边界，以在输入的开头和结尾处要求字符字符。请注意，您不需要使用^（字符串的开头）和$（字符串的结尾）锚点，因为在从模式编译正则表达式时，HTML5引擎会自动添加它们。

所以，你可以使用

pattern="\b[a-z0-9.-]{3,25}\b"

它将被解析为/^(?:\b[a-z0-9.-]{3,25}\b)$/匹配3到25个小写ASCII字母（在A-Z之后添加[以匹配大写ASCII字母），数字，.或-，但字符串的开头和结尾不允许.或-。

参见演示：

＆＃13;

input:valid {
  color: black;
}
input:invalid {
  color: red;
}

＆＃13;

<input name="desiredNames" type="text" placeholder="your-site-name" pattern="\b[a-z0-9.-]{3,25}\b" id="desiredNames" />

＆＃13;

Answer 2

你可能正在寻找这个：

^[^.-].{1,23}[^.-]$

^表示从字符串的开头开始，除非在[]内，这意味着not

.表示除换行符之外的任何字符，但[]表示句点

-通常用作[]（A-z）内的范围，除非它被放置在它只是意味着减号的末尾。

可能是一个更好的解释者：

https://regex101.com/r/OYRnMO/1

Answer 3

您将尝试以下选项。

＆＃34; ＆lt;输入所需模式=＆＃34; [A-Za-z0-9] + [\。\ - ] * [A-Za-z0-9] +＆＃34; maxlength = 25 minlength = 3 name =＆＃34; desiredNames＆＃34;类型=＆＃34;文本＆＃34;占位符=＆＃34;您的站点名称＆＃34; ID =＆＃34; desiredNames＆＃34; ＆GT; ＆＃34;

它为我工作。

在javascript

3 个答案: