JQUERY.form插件简单使用

Posted 2020-10-25 java王子

<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>