表单验证一些判断格式--Pattern的用法

最新推荐文章于 2024-06-14 11:20:47 发布

胆小鬼vs

最新推荐文章于 2024-06-14 11:20:47 发布

阅读量1.1k

点赞数 2

分类专栏： web 文章标签： javascript html

本文链接：https://blog.csdn.net/m0_54020832/article/details/121864376

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客分享了使用JavaScript进行表单验证的方法，包括手机号码、密码强度、昵称唯一性和验证码的验证。通过正则表达式实现对输入的格式检查，确保数据的有效性和安全性。同时列举了一些常见的正则表达式模式，用于匹配不同类型的输入，如邮箱、URL、电话号码等。

摘要由CSDN通过智能技术生成

JavaScript表单验证实验过程中验证手机号码、密码、昵称的部分内容

<script type="text/javascript">
        function CheckForm() {
            var phoneip=CheckPhone();
            var passwordid=CheckPassword();
            var nameid=CheckName();
            var validateid=CheckValidate();
            return phoneip&passwordid&nameid&validateid;
        }
        //验证手机号
        function CheckPhone(){
            var Phone=document.getElementById('phone');
            var PhoneErr=document.getElementById('phoneAlert');
            var pattern=/^1[34578]\d{9}$/;  //验证手机号正确形式
            if(!pattern.test(Phone.value)){
                PhoneErr.style.visibility="visible";
                return false;
            }
            else {
                PhoneErr.style.visibility="hidden";
            }
            if(Phone.value==""){
                PhoneErr.style.visibility="visible";
                return false;
            }
            else{
                PhoneErr.style.visibility="hidden";
            }
        }
        //验证密码
        function CheckPassword() {
            var Passwd=document.getElementById('password');
            var PasswdErr=document.getElementById('passAlert');
            var pattern=/^\w{6,}$/;//最少6位
            if (!pattern.test(Passwd.value)){
                PasswdErr.style.visibility="visible";
                return false;
            }
            else{
                PasswdErr.style.visibility="hidden";
            }
            if(Passwd.value=""){
                 PasswdErr.style.visibility="visible";
                 return  false;
            }
             else{
                 PasswdErr.style.visibility="hidden";
             }
        }
        //判断昵称
        function CheckName() {
            var namedate=["Tom","Jack","Carson","Nadal","Federer","Djokovic","Murray"];//已有的昵称
            var Name=document.getElementById('nickname');
            var NameErr=document.getElementById('nickAlert');
            for(let i=0;i<namedate.length;i++) {
                if (Name.value == namedate[i]) {
                    NameErr.style.visibility = "visible";
                    return false;
                } else {
                    NameErr.style.visibility = "hidden";
                }
            }
            if(Name.value==""){
                NameErr.style.visibility="visible";
                return false;
            }
            else{
                NameErr.style.visibility="hidden";
            }
        }
        //验证码
        function CheckValidate() {
            var Vali=document.getElementById('validate');
            var ValiErr=document.getElementById('validateAlert');
            if(Vali.value==""){
                ValiErr.style.visibility="visible";
                return false;
            }
            else{
                ValiErr.style.visibility="hidden";
            }
        }
    </script>

下面是转化一位博主的一些 Pattern的用法常用的格式，方便查看。

原文链接：https://blog.csdn.net/qq_36927265/article/details/87864026

1 匹配首尾空格的正则表达式：(^\s*)|(\s*$)
2 整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$
3 只能输入数字："^[0-9]*$"。
4 只能输入n位的数字："^\d{n}$"。
5 只能输入至少n位的数字："^\d{n,}$"。
6 只能输入m~n位的数字：。"^\d{m,n}$"
7 只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。
8 只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。
9 只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。
10 只能输入非零的正整数："^\+?[1-9][0-9]*$"。
11 只能输入非零的负整数："^\-[1-9][]0-9"*$。
12 只能输入长度为3的字符："^.{3}$"。
13 只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。
14 只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。
15 只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。
16 只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。
17 只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。
18 验证用户密码："^[a-zA-Z]\w{5,17}$"正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。
19 验证是否含有^%&',;=?$\"等字符："[^%&',;=?$\x22]+"。
20 只能输入汉字："^[\u4e00-\u9fa5]{0,}$"
21 验证Email地址："^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。
22 验证InternetURL："^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。
23 验证电话号码："^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。
24 验证身份证号（15位或18位数字）："^\d{15}|\d{18}$"。
25 验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。
26 验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"。
27 匹配中文字符的正则表达式： [\u4e00-\u9fa5]
28 匹配双字节字符(包括汉字在内)：[^\x00-\xff]
29 应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
30 String.prototype.len=function(){return this.replace(/[^\x00-\xff]/g,"aa").length;}
31 匹配空行的正则表达式：\n[\s| ]*\r
32 匹配html标签的正则表达式：<(.*)>(.*)<\/(.*)>|<(.*)\/>
原文链接：https://blog.csdn.net/qq_36927265/article/details/87864026