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