首先在你的html页面中引入jquery文件
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
创建表单
<form>
<div class="active-form">
<div class="name-container"><span>姓名:</span><input type="text" id="s-name" maxlength="6"></div>
<div class="phone-container"><span>电话:</span><input type="text" id="s-phone" maxlength="11"></div>
<div class="weibo-container">新浪微博名:<input type="text" id="s-weibo" maxlength="15"></div>
<div class="btn" id="btn">提交</div>
</div>
</form>
</pre><p></p><pre>
jquery部分
$("#btn").click(function(){
var username = $("#s-name").val();
var phone = $("#s-phone").val();
var microblog = $("#s-weibo").val();
if(username=='') {
alert('姓名不能为空');
$(":text[id=s-name]").focus();
return;
}
if(phone=='') {
alert('手机号不能为空');
$(":text[id=s-phone]").focus(); //当有错误就自动指定input输入框
return;//阻止表单提交
}
if(!phone.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)) {
alert('手机号码格式不正确');
$(":text[id=s-phone]").focus();
return;
}
if(microblog=='') {
alert('微博号不能为空');
$(":text[id=s-weibo]").focus();
return;
}
$.ajax({
type:'post',//提交方式
url: '你要处理数据的url',
dataType:'json',//数据类型
data: {
'username' : username ,//对应input内容
'phone' : phone ,
'microblog' : microblog ,
},
success: function(data){//执行成功后操作
<span style="white-space:pre"> </span>console.log(data);//看下返回的数据
<span style="white-space:pre"> </span>}
});
});
表单创建完毕后就开始我们的ajax了