<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.results {
border: 1px solid red;
height:20px;
display:none;
}
label {
display:block;
}
</style>
</head>
<body>
<form name='myform' id='myform'>
<label for="username">
<span>用户名:</span>
<input type="text" name="username" value="" placeholder="admin">
<div class="results" id="result_username"></div>
</label>
<label for="password">
<span>密码:</span>
<input type="password" name="password" value="">
<div class="results" id="result_password"></div>
</label>
<label for="age">
<span>再次输入密码:</span>
<input type="password" name="password2" value="">
<div class="results" id="result_password2"></div>
</label>
<label for="school">
<span>学历:</span>
<select name='school'>
<option value="1">本科</option>
<option value="2">专科</option>
<option value="3">高中</option>
</select>
</label>
<label for="hobby[]">
<span>兴趣:</span>
<div>
<input type="checkbox" name="hobby[]" value="1"> 排球
<input type="checkbox" name="hobby[]" value="2"> 篮球
<input type="checkbox" name="hobby[]" value="4"> 足球
<input type="checkbox" name="hobby[]" value="8"> 中国足球
<input type="checkbox" name="hobby[]" value="16"> 地球
</div>
<div class="results" id="result_hobby"></div>
</label>
<label for="from">
<span>来自:</span>
<div>
<input type="radio" name="from" value="1"> 东北
<input type="radio" name="from" value="2"> 华北
<input type="radio" name="from" value="3"> 西北
<input type="radio" name="from" value="4"> 华东
<input type="radio" name="from" value="5"> 华南
<input type="radio" name="from" value="6"> 华西
</div>
<div class="results" id="result_from"></div>
</label>
<input id='register' type="button" value="提交">
</form>
<table border='1'>
<thead >
<tr>
<th>用户名</th>
<th>学历</th>
<th>兴趣</th>
<th>来自</th>
<th>注册时间</th>
</tr>
</thead>
</table>
<script src='./jquery-1.8.3.min.js'></script>
<script>
//扩展jquery把获得的值转换为json格式
$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
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>
<script>
var myForm = (function(){
return {
el : {},
init : function() {
var that = this;
$.extend(that.el,{
'myform': $('#myform'),
'username' : $('#result_username'),
'password' : $('#result_password'),
'password2' : $('#result_password2'),
'hobby': $('#result_hobby'),
'form' : $('#result_from'),
'register' : $('#register'),
'results' :$('.results')
})
this.click_hobby();
this.click_form();
this.focus_or_blur();
this.click_register();
},
//获得焦点提示用户
focus_username : function(){
this.el.username.css({'display':'block'});
this.el.username.html('只能输入中文或者英文');
},
//失去焦点判断用户是否符合
blur_username : function(){
var pre = this.el.username.prev().val();
var reg=/^[\u4E00-\u9FA5A-Za-z]+$/;
if (pre=='') {
this.el.username.html('(必填项)用户名不能为空哦');
this.el.username.css({'display':'block'});
return false;
}else if (!reg.test(pre)) {
this.el.username.html("用户名输入不合法");
this.el.username.css({'display':'block'});
return false;
}else{
this.el.username.html("");
this.el.username.css({'display':'none'});
return false;
}
},
//获得焦点提示用户密码
focus_password : function(){
this.el.password.css({'display':'block'});
this.el.password.html('请输入6到12位的密码');
},
//失去焦点判断用户密码是否符合
blur_password : function(){
var pre = this.el.password.prev().val();
var reg=/^[\w]{6,12}$/;
if(!reg.test(pre)){
this.el.password.html("输入的密码必须6到12位");
this.el.password.css({'display':'block'});
return false;
}else{
this.el.password.html("");
this.el.password.css({'display':'none'});
return false;
}
},
//获得焦点提示用户密码
focus_password2 : function(){
this.el.password2.css({'display':'block'});
this.el.password2.html('请输入6到12位的密码');
},
//失去焦点判断用户密码是否符合
blur_password2 : function(){
var pre2 = this.el.password2.prev().val();
var pre1 = this.el.password.prev().val();
var reg=/^[\w]{6,12}$/;
if(pre2!=pre1){
this.el.password2.html("两次密码不一致");
this.el.password2.css({'display':'block'});
}else if(!reg.test(pre2)){
this.el.password2.html("输入的密码必须6到12位");
this.el.password2.css({'display':'block'});
return false;
}else{
this.el.password2.html("");
this.el.password2.css({'display':'none'});
return false;
}
},
//判断hobby是否有选择
checked_hobby : function(){
var hobbyBox = this.el.hobby.prev().find('input');
var len = hobbyBox.length;
for(var i=0;i<len;i++){
if(hobbyBox[i].checked==true){
return true;
break;
}
}
return false;
},
//判断地点是否有选择
checked_form : function(){
var formRadio = this.el.form.prev().find('input');
var len = formRadio.length;
for(var i=0;i<len;i++){
if(formRadio[i].checked==true){
return true;
break;
}
}
},
//是否合法点击按钮
Toggle_meet: function(){
var that = this;
var len = that.el.results.length;
for(var i=0;i<len;i++){
if($(that.el.results[i]).css('display') === 'block'){
return false;
break;
}
}
return true;
},
//点击提交时做的事
click_register : function(){
var that = this;
this.el.register.on('click',function(){
if(!that.checked_hobby()){
that.el.hobby.css({'display':'block'});
that.el.hobby.html('至少选择一个爱好');
}
if(!that.checked_form()){
that.el.form.css({'display':'block'});
that.el.form.html('请选择来自的地点');
}
that.blur_username();
that.blur_password();
that.blur_password2();
if(that.Toggle_meet){
that.myForm_ajax();
}
})
},
//当用户点checkbox击时取消提示
click_hobby : function(){
var that = this;
var hobbyBox = this.el.hobby.prev().find('input');
hobbyBox.on('click',function(){
if(that.checked_hobby()){
that.el.hobby.css({'display':'none'});
that.el.hobby.html('');
}
})
},
//当用户点radio击时取消提示
click_form : function(){
var that = this;
var formBox = this.el.form.prev().find('input');
formBox.on('click',function(){
if(that.checked_form()){
that.el.form.css({'display':'none'});
that.el.form.html('');
}
})
},
//用户获得焦点
focus_or_blur : function(){
var that = this;
this.el.username.prev().on('focus',function(){
that.focus_username();
})
this.el.username.prev().on('blur',function(){
that.blur_username();
})
this.el.password.prev().on('focus',function(){
that.focus_password();
})
this.el.password.prev().on('blur',function(){
that.blur_password();
})
this.el.password2.prev().on('focus',function(){
that.focus_password2();
})
this.el.password2.prev().on('blur',function(){
that.blur_password2();
})
},
//验证都完成请求我们想要的后台的数据
myForm_ajax : function(){
$.ajax({
url :'./myphp.php',
type :'POST',
data : $('#myform').serializeObject(),
dataType:'json',
success : function(data){
console.log(data);
}
}
)
}
}
})()
myForm.init();
</script>
</body>
</html>
