用jQuery编写网页-表单检查

制作工具：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>

更多相关文章

随机推荐