1.表单排版一般效果
<div class="index-pg submit-form">
<form action="" method="post" id="form1">
<div class="input-box">
<p><span>姓名:</span><input name="username" type="text" placeholder="请输入您的姓名"></p>
<p><span>手机:</span><input name="tel" type="text" placeholder="请输入您的手机号码"></p>
</div>
<div class="input-box input-box1">
<p><span>意向国家:</span>
<select name="country_id">
<option value="1">美国</option>
<option value="2">加拿大</option>
<option value="3">匈牙利</option>
<option value="4">西班牙</option>
<option value="5">葡萄牙</option>
</select>
</p>
</div>
<p class="pg-btn">
<img src="p_w_picpath/btns.png">
</p>
</form>
</div>
2.css样式
.index-pg{padding-bottom:20px;padding-top: 20px;}
.index-pg .text1{font-size:16px;color:333;text-align:center;padding:10px 0}
.index-pg .text2{font-size:14px;color:333;text-align:center}
.index-pg .text1 span,.index-pg .text2 span{color:#2681d9}
.index-pg .input-box p{
display: -webkit-box;
display: box;
display: -webkit-flex;
display: flex;
margin-bottom:15px}
.index-pg .input-box p span{width:45px;line-height:30px;}
.index-pg .input-box p input{padding:0 5px;color:#666;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9;line-height:25px;}
.index-pg .text3{padding:0 35px;color:#2681d9;font-size:14px;}
.index-pg .input-box1 p span{width:70px;}
.index-pg .input-box1 p select{height:30px;line-height:30px;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9}
.index-pg .pg-btn img{width:160px;height:40px;display:block;margin:0 auto;}
3.js代码
$('#form1').on('click','.pg-btn',function(){
var form=$('this).data('target-id');
var myform=$('#'+form);
var name=myform.find("[name='username']");
var tel=myform.find("[name='tel']");
//下拉列表选中的选中项文字
var country=myform.find("[name='country_id']").find("option:selected").text();
//检测手机号码
function checkphone(num){
var re = /^1[358][0-9]{9}$/;
if(!re.test(num)){
alert('请您输入正确的手机号码');
return false;
}
}
//非空验证
if (!$.trim(name.val())) {
layer.msg('请填写姓名');
return false;
};
if (!$.trim(tel.val())) {
layer.msg('请输入电话号码');
return false;
};
var formdata={
name:name,
tel:tel,
country:country
};
$.post(form.attr('action'),formdata,function(res){
var res=JSON.parse(res);
if(res.status==1){
alert('您已经提交成功');
form.reset();
}else{
alert(‘不好意思,服务器出了点小错误,请您重新提交一次');
form.reset();
}
})
})
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。