$('#regForm').validate({
成都创新互联公司专业为企业提供滨州网站建设、滨州做网站、滨州网站设计、滨州网站制作等企业网站建设、网页设计与制作、滨州企业网站模板建站服务，10余年滨州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
rules:{
cellphone:{
required:true,
mobilephone:true,
remote:'/index/check-username'
},
verify:{
required:true,
remote:'/index/check-verifycode'
},
password:{
required:true,
minlength:6,
maxlength:20
},
confirmPassword:{
required:true,
minlength:6,
maxlength:20,
equalTo: "#password"
},
smgverifycode:{
required:true
},
/*inviteCode:{
maxlength:5,
minlength:5,
remote:"/index/check-invite-code"
},*/
agreement:{
required:true
}
},
messages:{
cellphone:{
required:addstyle('请输入手机号码'),
mobilephone:addstyle('不是有效的手机号'),
remote:addstyle('手机号码已经被注册')
},
verify:{
required:addstyle('请输入图文码'),
remote:addstyle('图文码不正确')
},
smgverifycode:{
required:addstyle('请输入短信验证码')
},
password:{
required:addstyle('请输入密码'),
minlength:addstyle("密码应该为6-20位"),
maxlength:addstyle("密码应该为6-20位")
},
confirmPassword:{
required:addstyle('请再一次输入密码'),
minlength:addstyle("密码应该为6-20位"),
maxlength:addstyle("密码应该为6-20位"),
equalTo:addstyle('您输入的确认密码和密码不一致')
},
/*inviteCode:{
maxlength: addstyle('邀请码不正确'),
minlength: addstyle('邀请码不正确'),
remote:addstyle('邀请码不存在')
},*/
agreement:{
required:addstyle('请同意供货商入驻协议')
}
},
errorElement:'p',
errorClass:'err_p',
errorPlacement:function(error, element){
if (e.html() == "" error[0].textContent != "") {
error.appendTo(e.show());
}
},
//success:function(label,element){
// console.log(2, label, element);
// label.parent().parent().siblings('div').removeClass('control-group err');
// if(label.text() == ''){
// label.parent().css('display','none');
// label.remove();
// }
//},
highlight: function (element) { // hightlight error input
if (e.find('p').attr('for') == 'smgverifycodeoften') {
e.html('').hide();
}
if (e.text() == "" || e.find('p').attr('for') == $(element).attr('id') ) {
$(element).parent().addClass('control-group err');
}
},
unhighlight: function (element) { // revert the change done by hightlight
var label = $("span.err_msg");
$(element).parent().removeClass('control-group err');
if(label.text() == '' e.text() == ""){
e.hide();
}
},
submitHandler:function(form){
s.addClass('alert-info').html('span注册中...请稍后/span').show();
$.post("/index/post-register", $(form).serialize(), function(res){
if(res.code){
$.cookie('username', $('input[name="cellphone"]').val(), {expires:30});
s.html('span注册成功, 跳转至登录页.../span').show();
setTimeout(function(){
window.location = '/index/login';
}, 800);
} else {
s.hide(); //隐藏正确提示
/*if (res.data.reason == 1) {
$('#invite_code').parent().addClass('control-group err');
e.html('p for="invite_code" class="err_p"span class="err_msg"'+res.msg+'/span/p').show();//显示错误信息
$(".err_p").show();
}*/
if (res.data.reason == 2) {
$('#smgverifycode').parent().addClass('control-group err');
e.show().html('p for="smgverifycode" class="err_p"span class="err_msg"'+res.msg+'/span/p');//显示错误信息息
$(".err_p").show();
} else {
$('#smgverifycode').parent().addClass('control-group err');
e.show().html('p for="smgverifycode" class="err_p"span class="err_msg"'+res.msg+'/span/p');//显示错误信息息
$(".err_p").show();
}
setTimeout(function() {
e.hide().html('')
}, 2000);
}
},'json');
}
});
});
在jquery mobile开发中，经常需要调用ajax方法，异步获取数据，如果异步获取数据方法由于网速等等的原因，会有一个反应时间，如果能在点击按钮后数据处理期间，给一个正在加载的提示，客户体验会更好一些。
如果需要在页面加载时显示加载器，页面加载完成之后关闭加载器，请参考另一篇文章：jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
先看两个方法，显示和关闭，方法来自于参考：
script
//显示加载器
function showLoader() {
//显示加载器.for jQuery Mobile 1.2.0
$.mobile.loading('show', {
text: '加载中...', //加载器中显示的文字
textVisible: true, //是否显示文字
theme: 'a', //加载器主题样式a-e
textonly: false, //是否只显示文字
html: "" //要显示的html内容，如图片等
});
}
//隐藏加载器.for jQuery Mobile 1.2.0
function hideLoader()
{
//隐藏加载器
$.mobile.loading('hide');
}
/script
然后在ajax中调用：
//获取进度
function InsertStatus(matterID, obj) {
var a = $(obj).parent().parent().parent();
$.ajax({
type: "POST",
contentType: "application/json",
url: "/ToDoList/InsertStatus/?matterID=" + matterID,
beforeSend: function () {
showLoader();
},
complete:function(){
hideLoader();
},
success: function (msg) {
if (msg 0) {
$("#popdiv").text("获取进度成功");
} else {
$("#popdiv").text("获取进度失败");
}
//弹出提示信息
$("#GettingProgress").attr('data-rel', 'dialog');
$("#GettingProgress").trigger('create');
$("#popdiv").popup("open");
setTimeout(function () { $("#popdiv").popup("close"); }, 2000);
}
});
}
JQuery的弹出提示框可以有两种方式
Alert 方式以及 Confirm 方式弹出
Alert方式的弹出提示框，只能有一种抉择，那就是确定，他这是一种不可选择的提示
Confirm方式，是带有选择功能的提示框，用户可以点击确定或者取消
1、给输入名字的文本框绑定一个失去焦点事件，jquery中为focusout事件，同时在文本框后定义一个显示检查结果的span。
2、当文本框失去焦点时，调用ajax异步向后台发送请求。
3、将请求结果显示在文本框后面提示用户,避免所有信息填写完毕表单提交时才发现名字重复。
示例：
input type='text' id='name'/span id='errorMsg'/erorMsg
//给文本框绑定一个失去焦点事件
$("#name").focusout(function() {
var name = $("#name").val();
if(name != null name != ''){
checkName(name);
}
});
//发ajax请求到后台判断用户名是否重复
function checkName(name){
$.ajax({
url : servletUrl,
type : "post",
dataType : 'JSON',
data : {name:name},
success : function(result) {
//已经存在该名字提示用户
if(result == true){
$("#errorMsg").html("该用户名已经存在");
}else{
$("#errorMsg").html("恭喜您，用户名可以使用");
}
}
},
error : function() {
alert('检查用户是否存在发生错误');
}
});
}
下载jquery开发版
1
要实现jquery的自动提示功能，myeclipse要实现安装spket插件。
下载jquery开发版，而不是压缩版
2
打开myeclipse，选择windows--perferences--spket--javaScript Profiles
3
在右边点击new按钮，进行新建，输入名称jquery，然后点击确定
4
然后选中jquery，点击右侧的”Add Library“按钮，选择”jQuery“
5
在选中”jQuery“,然后点击右侧的"Add File"按钮，选择之前下载的jquery.js
6
然后选中jquery，点击右侧的default按钮
7
找到General--Editors--File Accociations，然后将右侧的js，关联到Spket JavaScript Editor，将此编辑器设置为默认。
8
最终在myeclipse新建js文件，打开后，在里面写入jquery代码，出现自动提示
