1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {font-family: "微软雅黑";padding: 0;margin: 0;}
label {padding: 5px 0 5px 0;display: inline-block;}
input[type=radio],input[type=checkbox] {width: 15px;height: 15px;}
button{width: 70px;height: 30px;}
body>div:first-child{padding: 10px;}
</style>
<body>
<div>
<form id="form">
<label>姓名：</label><input type="text" name="username" id="" value="小明" /><br />
<label>密码：</label><input type="password" name="psd" id="" value="123" /><br />
<label>性别：</label>
<input type="radio" name="sex" id="" value="男" checked/><span>男</span>
<input type="radio" name="sex" id="" value="女" /><span>女</span>
<br />
<label>爱好：</label>
<input type="checkbox" name="hobby" id="" value="足球" checked/><span>足球</span>
<input type="checkbox" name="hobby" id="" value="拉球" checked/><span>拉球</span>
<input type="checkbox" name="hobby" id="" value="排球" /><span>排球</span>
<br />
<label>专业：</label>
<select name="major">
<option value="专业一">专业一</option>
<option value="专业二">专业二</option>
<option value="专业三">专业三</option>
<option value="专业四">专业四</option>
</select><br />
<label>特长：</label><textarea name="speciality" rows="" cols="">头发特长</textarea><br />
<label>附件：</label><input type="file" name="accessory" id="" value="" /><br />
<label>简介：</label><textarea name="synopsis" rows="" cols="">头发特长</textarea><br />
<button id="submit" type="button">提交</button>
<button type="reset">重置</button>
</div>
</form>
</body>
<!--需要引入你本地的jquery路径，要是不会的话，可以试试这个-->
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#submit').click(function(){
//序列化表单
var form = $('#form').serializeObject();
//表单转化为对象
form.accessory = $('input[name="accessory"]').val()
console.log(form);
//验证密码
if(form.psd != '123'){
alert('密码错误，请检查！');
return false;
}
//拼接需求的格式
var html = '姓名：'+form.username+'\n'+
'密码：'+form.psd+'\n'+
'性别：'+form.sex+'\n'+
'爱好：'+form.hobby+'\n'+
'专业：'+form.major+'\n'+
'特长：'+form.speciality+'\n'+
'附件：'+form.accessory+'\n'+
'简介：'+form.synopsis+'\n';
alert(html);
})
//表单提交数据转为object类型
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if(o[this.name]) {
if(!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
</script>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
