<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="./public.css">
<title>Title</title>
<style>
.form-box{
50%;
margin: 40px auto 0;
}
.form-box-other{
100%;
display: flex;
margin-bottom: 30px;
}
.form-box-other span{
200px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: #8e8e8e;
}
.form-box-other input{
flex: 1;
padding-left: 10px;
}
button{
display: block;
80%;
margin: 0 auto;
height: 50px;
font-size: 20px;
font-weight: 800;
}
#erro-tips{
display: block;
80%;
margin: 0 auto;
height: 50px;
font-size: 20px;
color: darkred;
font-weight: 800;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="form-box">
<div class="form-box-other">
<span>You name</span>
<input type="text" placeholder="You name">
</div>
<div class="form-box-other">
<span>Your credit card</span>
<input type="text" placeholder="Your credit card">
</div>
<div class="form-box-other">
<span>Your Github address</span>
<input type="text" placeholder="Your Github address">
</div>
<div class="form-box-other">
<span>Your email address</span>
<input type="text" placeholder="Your email address">
</div>
<button id="submit">Submit</button>
<span id="erro-tips"></span>
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
jQuery(function(){
var input = $('input');
var submit = $('#submit');
submit.click(function(){
if (!input[0].value) {
$("#erro-tips").html("请填写完整手机号")
} else if (!input[1].value) {
$("#erro-tips").html("请填写您的信用卡")
} else if (!input[2].value) {
$("#erro-tips").html("请填写您的Github地址")
} else if (!input[3].value) {
$("#erro-tips").html("请填正确的邮箱地址")
} else {
$.ajax({
url: "//40.125.162.90:7800/api/user/info",
type: "POST",
data: {
name: input[0].value,
walletAddress: input[1].value,
gitHub: input[2].value,
email: input[3].value
},
success:function (data) {
if (data.code === '200') {
$("#erro-tips").html("提交成功！感谢参与！")
} else {
$("#erro-tips").html(data.msg)
}
}
})
}
})
})
</script>