用jQuery编写网页-表单检查_网页表单检查样式-CSDN博客

本文链接：https://blog.csdn.net/viewerlin/article/details/79991301

制作工具：FireFox、TextWrangler
会检查我们所提交的信息是否符合对应的格式要求
比如是否符合邮箱格式，手机号码是否为数字，两次输入的密码是否一致。

不符合要求时
这里写图片描述

符合要求时
这里写图片描述

完整代码

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="jquery.min.js"></script>  <!--本地调用jQuery 一般下载下来使用-->
    <!--网址调用jQuery
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->

    <style>

        #wrapper {
            width:600px;
            margin:auto;
            font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
        }
        input {
            width:300px;
            height:40px;
            border-radius:5px;
            border:1px solid grey;
            font-size:1.2em;
            padding-left:5px;
            margin-bottom:10px;
        }
        label {
            width:200px;
            float:left;
            padding-top:7px;
            font-size:1.2em;
        }

        #submitButton {
            width:100px;
            margin-left:200px;
        }
        #error {
            color:red;
            margin:10px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="error"></div>
        <form id="validationForm"> 
        <label for="email">Email</label>
        <input name="email" id="email"/>
        <label for="phone">Telephone</label>
        <input name="phone" id="phone"/>
        <label for="pass">Password</label>  
        <input name="pass" type="password" id="pass1"/> <!--type="password" 输入的内容会变成小圆点-->
        <label for="pass">Confirm Password</label>
        <input name="pass" type="password" id="pass2"/>
        <input id="submitButton" type="submit" value="Submit" /> <!--添加提交按钮-->
        </form>
        <script>
            $("#validationForm").submit(function(event){  /*指向表格，以点击submit这个事件作为参数来执行函数操作*/
                var errorMessage=""; /*设定一个错误信息变量，初始为空*/
                event.preventDefault();  /*preventDefault 阻止原本作用*/
                /*判断是否为邮箱格式*/
                function isEmail(email) { 
                    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    return regex.test(email);
                }
                if (!isEmail($("#email").val())) { /*加!表示否定*/
                    errorMessage="Please enter a valid email address";
                }
                if (!$.isNumeric($("#phone").val())) { /*$.isNumeric判断为数值*/
                    errorMessage=errorMessage+"<br />Please enter a valid phone number"; /*多个问题分行提示*/
                }
                if ($("#pass1").val()!=$("#pass2").val()) { /*两次输入的密码不一样*/
                    errorMessage=errorMessage+"<br />Please enter a matching password";
                }
                if (errorMessage=="") { /*判断相等时要用==*/
                    alert("Submit Success!");
                }
                $("#error").html(errorMessage);
            });
        </script>
    </div>
</body>
</html>