JS表单验证实战-优快云博客

本文链接：https://blog.youkuaiyun.com/man_zuo/article/details/82989954
<html>
    <head>
        <meta charset="UTF-8">
        <title>js表单验证</title>
    </head>
    <body>
        <form name="frm" onsubmit="return yanzheng()"> 
                <!-- 注意：验证函数要在表单里，用onsubmit属性调用，并加上 return -->
                
                邮箱:<input type="text" name="email" id="email"><br>
                用户名:<input type="text" name="name" id="name"><br>
                密码:<input type="password" name="p1" id="p1"><br>
                确认密码:<input type="password" name="p2" id="p2"><br>
                手机号码:<input type="text" id="phone" name="phone"><br>
                <input type="submit" value="提交">
   
                <!-- 如果验证函数用在 提交按钮里，比如
                 <input type="submit" value="提交" onclick="yanzheng()">
                 这样不管验证是否成功，都会把表单提交
                -->
        </form>
    </body>
    <script>
       function yanzheng(){
        var regNameStr = /^\s*\w{6,10}\s*$/;
        // ^  匹配输入字符串的开始位置
        // \s 匹配空白字符任何空白字符，包括空格、制表符、换页符等等
        // \w 匹配字母、数字、下划线 
        // $  匹配输入字符串的结束位置
        // 上面的正则表达式匹配 长度在6-10之间的字符串，字符串两边可以加入任意空格
        // 即 名字的长度要在6-10之间（中文3到5个字）
        var regEmailStr = /^\s*\w+@\w+\s*$/;
        // 匹配  xxxx@XXX 格式的邮箱输入
        var regPhoneStr =/^1[0-9]{10}$/
        //匹配1开头的11位手机号码
        var email = document.getElementById("email").value; //获取html中 对应的属性名 的值
        var name = document.getElementById("name").value;
        var p1 = document.getElementById("p1").value;
        var p2 = document.getElementById("p2").value;
        var phone = document.getElementById("phone").value;
        if (frm.email.value.trim() =="") { // 也可以通过 表单名.属性名.value 获取对应的值 
            alert("邮箱不能为空！");
            document.getElementById("email").focus();//聚焦函数
            return false;
        }
        else if (!regEmailStr.test(email)) { //验证是否符合正则表达式的要求
            alert("邮箱格式错误");
            document.getElementById("email").focus();
            return false;
        }
        else if (name.trim() == "") { // trim()函数 可以去除空格
            alert("名称不能为空！");
            document.getElementById("name").focus();
            return false;
        }
        else if (!regNameStr.test(name)) {
            alert("名称格式错误，长度6到10位");
            document.getElementById("name").focus();
            return false;
        }
        else if (p1.trim() == "") {
            alert("请输入密码");
            document.getElementById("p1").focus();
            return false;
        }
        else if (p2.trim() == "") {
            alert("请输入确认密码");
            document.getElementById("p2").focus();
            return false;
        }
        else if (p1 != p2) {
            alert("密码和确认密码不一样！");
            document.getElementById("p2").focus();
            return false;
        }
        else if(phone.trim()==""){
            alert("请输入1开头的11位手机号码");
            document.getElementById("phone").focus();
            return false;
        }
        else return true; 

    }
       
    </script>
</html>