jquery.validate验证表单

最新推荐文章于 2022-05-05 12:42:44 发布

weixin_34331102

最新推荐文章于 2022-05-05 12:42:44 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aeolian/p/9214532.html

本文介绍了一个使用jQuery实现的表单验证方法及添加数据到后台的具体步骤。通过定义验证规则和消息，确保用户输入符合预期格式，并在验证通过后通过AJAX方式提交数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加引用

<script src="/${appName}/commons/js/validate/jquery.validate.min.js"></script>

    /*验证表单*/
    function vform(dom,func){
        $("#"+dom).validate({
                rules : {
                    cateCode : {
                        required : true,
                        maxlength: 50
                    },
                    money:{
                        required : true,
                        maxlength: 50,
                        number:true
                    },
                    remark:{
                        required : true,
                    },
                    time:{
                        required : true,
                        date:true
                    }
                },
                messages : {
                    cateCode : {
                        required : "请选择类别",
                        maxlength: "参数名过长"
                    },
                    money:{
                        required: "请输入金额",
                        maxlength: "参数名过长",
                        number:"请输入数字"
                    },
                    remark:{
                        required: "请输入备注信息",
                    },
                    time:{
                        required: "请选择日期",
                        date:"日期格式错误"
                    }
                },
                submitHandler : function() {
                    func();
                }
        });
    }
      
      /**------验证成功后,添加操作------*/
      function addBook(){
          var cateCode = cate_code_add;
          var money = $("#money_add").val();
        var remark = $("#remark_add").val();
          var time = $("#time_add").val();
          if(isNull(cateCode)){
            swal({
                title: "提示",
                text: "请选择类型",
                type: "warning"
            },function(){
                $("#cateCode_add").focus();
            });
            return;
        }
        $.ajax({
            url:'/${appName}/manager/bookController/addBook',
            type:'post',
            async:'true',
            cache:false,
            data:{cateCode:cateCode,money:money,remark:remark,time:time},
            dataType:'json',
            success: function(data){
                      console.info();
                      if(data){
                          swal({
                              title: "系统提示",
                              text: "添加成功",
                              type: "success"
                          },function(){
                              $("#cateCode_add").val('');
                              $("#money_add").val('');
                              $("#remark_add").val('');
                              $("#addwin").modal('hide');
                          });
                      }else{
                          swal({
                                  title: "系统提示",
                                 text: "添加失败",
                                 type: "warning"
                             },function(){
                                  $("#addwin").modal('hide');
                             });
                      }
            },
            error: function (aa, ee, rr) {
                      swal({
                             title: "系统提示",
                             text: "请求服务器失败,清稍候再试",
                             type: "warning"
                             },function(){
                                 $("#addwin").modal('hide');
                             });
            }
        });
      }

          //添加验证,在$(function(){});中执行
          vform('addform',addBook);