JavaScript表单验证

最新推荐文章于 2020-05-03 09:15:20 发布

冰蛙ing

最新推荐文章于 2020-05-03 09:15:20 发布

阅读量351

点赞数

文章标签： JavaScript表单验证 JavaScript验证

本文链接：https://blog.csdn.net/he19970408/article/details/100854763

版权

<head>
    <meta charset="UTF-8">
    <title>js表单验证</title>
</head>
<body background="img/2.jpg">
    <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="提交" οnclick="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>

冰蛙ing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript表单验证

<head> <meta charset="UTF-8"> <title>js表单验证</title></head><body background="img/2.jpg"> <form name="frm" onsubmit="return yanzheng()"> ...
复制链接

扫一扫