您的位置:首页 > 其它

form表单ajaxSubmit提交并验证

2016-05-03 09:29 381 查看
html:

<form class="register-form" action="{:U('')}" method="post">
<span class="error"></span>
<div class="p"><input type="text" class="input_text user_name" placeholder="请输入通行证账号,6—16位字符" name="username"></div>
<div class="p"><input type="password" class="input_text pass_word" placeholder="请设置6-16位密码,不区分大小写" name="password"></div>
<div class="p">
<div class="unlock">
<div class="slideunlock" id="slideunlock">
<span class="unlock-btn" id="unlock-btn"></span><span class="tips">请按住滑块,拖至最右边</span>
</div>
</div>
</div>

<div class="p"><button type="submit" disabled>立即注册</button></div>
</form>

jquery:

$(function(){
/*js验证*/
$(".register-form").resetForm();
//注册表单验证
$(".register-form").validate({
rules :{
'username':{
required:true,
rangelength: [5,16],
isUserName:true,
remote:"{:U('')}"
},
password:{required:true,minlength:6,maxlength:18}
},
messages :{
'username':{required:"请输入用户名",rangelength:"用户名必须在5-16个字符之间",remote:"用户名被占用"},
password:{required:"请输入密码",minlength: "密码不能少于6个字符",maxlength: "密码不能大于18个字符"}
},
errorPlacement: function(error, element) {
//错误信息显示到最后面
$("span.error").html(error);
},
success: function(label) {
$("span.error").html("").removeClass("error");
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type: 'post', // 提交方式 get/post
url:$(form).attr("action"),
success: function(data) {
// data 保存提交后返回的数据,一般为 json 数据
// 此处可对 data 作相关处理
//alert(data.status);
if(data.status){
alert(data.info);
$(form).resetForm();
} else {
alert(data.info);
$(form).resetForm();
//刷新验证码
}
}
});
$(form).resetForm(); // 提交后重置表单
return false;
}
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: