验证表单——正则表达式

最新推荐文章于 2024-05-09 09:19:32 发布

LullabyLY

最新推荐文章于 2024-05-09 09:19:32 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/qq_42853241/article/details/92239254

版权

练习了密码的强弱长度，之后继续联系验证表单
首先需要掌握一些例子的正则表达式（验证表单需要严格模式）

qq号码：为5-11位，首位不为0，/^[1-9]\d{4,10}$/
邮箱：/^[0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}$/（重点）
手机号码：11位，首位不为0，/^[1-9]\d{10}$/
姓名：中国有关姓名定义的法律规定，姓名只能是2-6位，[\u4e00-\u9fa5]，这个表达式是固定的不会改变

补充：
[\u4e00-\u9fa5]：一到龥
escape()和unescape()
escape()：可以得到文字的编码
unescape()：根据编码得到文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label for="qq">Q Q<input type="text" id="qq"><span></span></label><br/>
<label for="phone">手机</label><input type="text" id="phone"><span></span><br/>
<label for="e-mail">邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label for="telephone">座机</label><input type="text" id="telephone"><span></span><br/>
<label for="fullName">姓名</label><input type="text" id="fullName"><span></span><br/>

</body>
<script>
    checkForm(document.getElementById("qq"),/^[1-9]\d{4,10}$/);
    checkForm(document.getElementById("phone"),/^[1-9]\d{10}$/);
    checkForm(document.getElementById("e-mail"),/^[0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}$/);
    checkForm(document.getElementById("telephone"),/^\d{3,4}[-]\d{7,8}$/);
    checkForm(document.getElementById("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
    function checkForm(obj,reg) {
        obj.onblur=function () {
            if (reg.test(obj.value)){
                this.nextElementSibling.innerHTML="✔";
                this.nextElementSibling.style.color="green";
            }else{
                this.nextElementSibling.innerHTML="❌";
                this.nextElementSibling.style.color="red";
            }
        }
    }
</script>
</html>

在这里插入图片描述

LullabyLY

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
验证表单——正则表达式

练习了密码的强弱长度，之后继续联系验证表单首先需要掌握一些例子的正则表达式（验证表单需要严格模式）qq号码：为5-11位，首位不为0，/^[1-9]\d{4,10}$/邮箱：/^[0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}$/（重点）手机号码：11位，首位不为0，/^[1-9]\d{10}$/<!DOCTYPE ht...
复制链接

扫一扫