js光标离开文本框,判断输入的数据是否符合规则,如果不符合,则在右侧进行提示。规则是输入数据的长度应大于或等于6,小于或等于16
时间: 2024-02-20 19:59:05 浏览: 31
可以通过监听文本框的 `blur` 事件来判断用户是否离开了文本框,然后在事件处理函数中获取输入的文本并进行判断。可以使用正则表达式来判断输入的数据是否符合规则,具体代码如下:
```js
const inputElem = document.querySelector('input');
inputElem.addEventListener('blur', function() {
const value = this.value;
const length = value.length;
if (length < 6 || length > 16) {
// 不符合规则,进行提示
const tipElem = document.createElement('div');
tipElem.innerText = '输入数据的长度应大于或等于6,小于或等于16';
tipElem.style.color = 'red';
this.parentNode.appendChild(tipElem);
} else {
// 符合规则,清除提示
const tipElem = this.parentNode.querySelector('div');
if (tipElem) {
this.parentNode.removeChild(tipElem);
}
}
});
```
这段代码会在用户离开文本框后,获取文本框的值并判断长度是否符合规则。如果不符合规则,则创建一个提示元素并添加到文本框的父节点中;如果符合规则,则清除之前的提示元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)