JQUERY.form插件简单使用

<script type="text/javascript">
 ??$(function(){
 ?????//第一种Ajax提交表单的方式
 ?????$("#registerForm").ajaxForm(function(data){
 ?????????data=eval("("+data+")");
 ????????alert(data.msg);
 ?????});
 ?????//执行流程:1,点击表单的提交按钮,2,触发jQuery-validate的验证;
 ?????//3,验证成功,jquery-validate会自动提交表单;(因为这个时候表单已经是Ajax表单了,所以表单的提交通过Ajax提交)
 ?????
 ?????//自定义jquery-validate验证方法
 ?????/*$.validator.addMethod("checkUsername", function(value, element) {
 ????????//这个验证方法返回一个boolean值来代表验证是否通过
 ????????var ret=false;
 ????????$.ajax({
 ???????????dataType:"json",
 ???????????type:"post",
 ???????????async:false,
 ???????????url:"/checkUsername.do",
 ???????????data:{
 ??????????????username:value
 ???????????},
 ???????????success:function(data){
 ??????????????ret = data.success;
 ???????????}
 ????????});
 ????????return ret;
 ?????}, "用户名已经存在!");*/
 ?????
 ?????$("#registerForm").validate({
 ????????rules:{
 ???????????username:{
 ??????????????required:true,
 ??????????????rangelength:[4,16],
 ??????????????checkUsername:true
 ???????????},
 ???????????password:{
 ??????????????required:true,
 ??????????????rangelength:[4,16]
 ???????????},
 ???????????confirmPwd:{
 ??????????????equalTo:"#password"
 ???????????}
 ????????},
 ????????messages:{
 ???????????username:{
 ??????????????required:"请输入用户名",
 ??????????????rangelength:"用户名长度为{0}到{1}",
 ??????????????remote:"用户名已经存在"
 ???????????},
 ???????????password:{
 ??????????????required:"请输入密码",
 ??????????????rangelength:"密码长度为{0}到{1}"
 ???????????},
 ???????????confirmPwd:{
 ??????????????equalTo:"两次输入密码不一致"
 ???????????}
 ????????},
 ????????//修改错误提示文字的样式
 ????????errorClass:"text-danger",
 ????????//处理错误高亮
 ????????highlight:function(element,errorClass){
 ????????????alert("aa");
 ???????????$(element).closest(".form-group").addClass("has-error");
 ????????},
 ????????//取消错误高亮
 ????????unhighlight:function(element,errorClass){
 ???????????$(element).closest(".form-group").removeClass("has-error");
 ????????},
 ????????//在表单验证成功之后提交表单做的事情
 ????????//第二种Ajax提交表单方式:
 ????????//1,点击表单中的提交按钮,2,jquery-valiate执行验证通过;因为这个时候我们配置了submitHandler,所以,当验证成功之后;
 ????????//jquery-validate不会自动提交表单,来执行submitHandler,3,在submitHandler中直接使用ajaxSubmit来完成表单提交;
 ????????/*submitHandler:function(form){
 ????????????alert("aaaa");
 ????????????return false;
 ???????????/!*$("#registerForm").ajaxSubmit({
 ??????????????dataType:"json",
 ??????????????success:function(data){
 ?????????????????if(data.success){
 ????????????????????$.messager.confirm("提示","注册成功,点击确认进入登录",function(){
 ???????????????????????window.location.href="/login.html";
 ????????????????????});
 ?????????????????}else{
 ????????????????????$.messager.popup("注册失败,"+data.msg);
 ?????????????????}
 ??????????????}
 ???????????});*!/
 ????????}*/
 ?????});
 ??})
</script>