黑马程序员技术交流社区

标题: 【上海校区】表单提交验证 [打印本页]

作者: 爱编码的J    时间: 2019-2-28 11:35
标题: 【上海校区】表单提交验证
1、注册表单检测
思路:
①给a标签绑定点击事件,手动提交表单
②在提交表单时,进行input输入框不能为空和手机号码验证(手机号格式检测)
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="./jquery.min.js"></script>
</head>
<body>
        <form action="demo.php" id="frm">
                手机号码: <input type="text" id="phone"><span></span><br>
                密码: <input type="text" id="pass" ><span></span><br>
                <input type="submit" value="注册" id="btn">
        </form>
        <script>               
                $("#btn").click(function(){
                        //设置一个变量,用来判断是否提交表单
                        var flag=0;
                        //做一个手机号码的正则
                        var preg=/^1[3-9]\d{9}$/;
                        //获取手机好号码
                        var phone=$("#phone").val();
                        if(phone==''){
                                flag++; //当手机号码为空的时候将值加一,用于判断是否提交表单
                                $("#phone").next().html("手机号码不能为空");
                        }else if(!preg.test(phone)){
                                flag++;
                                //验证手机号码
                                $("#phone").next().html("手机号码格式不正确");
                        }else{
                                //手机号码符合要求则将后面的提示信息去掉
                                $("#phone").next().html("");
                        }
                        //密码验证
                        if($("#pass").val()==""){
                                flag++;
                                // $("#pass").parent().find("span").html("密码为空");
                                $("#pass").next().html("密码为空");
                        }else{
                                // $("#pass").parent().find("span").html("");
                                $("#pass").next().html("");

                        }
                        //通过flag的值验证是否提交表单
                        if(!flag){
                                $("#frm").submit();
                        }else{
                                return false;
                        }
                })
        </script>       
</body>
</html>

HTML代码:

JS代码:

判断手否提交表单:

效果展示:






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2