Vue表单那些事

       关于表单那些事，学校念书那会老师都有讲过，实际项目开发也会经常用到，表单提交的前提是先验证，只有验证通过，才能允许将数据传到后台，Jquery 自带的验证用够了，这里记录下 vue 的验证，官网已经说了很明白了，form 的model 赋值 表单值，里面的input之类的元素 prop 值，结合rules 来进行验证，如下 Html 部分

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="Title">
                <el-col :span="4"><el-input v-model="ruleForm.Title" :disabled="diabol"></el-input></el-col>
            </el-form-item>
         </el-form>

 js 部分如下 （ ps：pattern: '[^ x22]+'  过滤空格）

    var vm = new Vue({
        el: "#app",
        data: {
            ruleForm: {
                Title: '',
            },
            rules: {
                Title: [
                    { required: true, message: '请输入评比标题', trigger: 'blur', pattern: '[^ x22]+' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                   ]
             }
         }
     })

依次类推进行操作即可，实际上除了本身一些失去焦点的验证，还有一些其他情形需要验证，如包括时间在内的验证， 如验证开始时间大于当前时间，开始时间不能大于结束时间之类的，需要通过赋值 validator  属性来进行进一步的补充验证

  StartTime: [
       { type: 'string', required: true, message: '请选择日期', trigger: 'change' },
       { validator: validateTime }
   ],
  EndTime: [
       { type: 'string', required: true, message: '请选择日期', trigger: 'change' },
   ],

    var validateTime = (rule, value, callback) => {
        var time = vm.ruleForm.EndTime;
        if (time != "" && new Date(value) > new Date(time)) {
            callback(new Error('开始时间不能大于结束时间'));
        }
        if ((new Date() - new Date(value)) / (24 * 60 * 60 * 1000) >= 1) {
            callback(new Error('开始时间不能小于当前时间'));
        }
        else {
            callback();
        }
    };

这里只验证了开始时间和结束时间的比较，若要初始化时可选时间为当前时间之后，则需在加载 vue 时，在data 下便给开始，结束时间赋初始值，如下

            startTimeOptions: {
                disabledDate(time) {
                    //8.64e7  代表一天 24*60*60*1000 = 8.64*10^7 科学计数表示法
                    return time.getTime() < Date.now() - 8.64e7; 
                }
            },
            endTimeOptions: {
                disabledDate: time => {
                    //拿到开始时间
                    var beginDateVal = vm.ruleForm.StartTime;
                    if (beginDateVal) {
                        return time.getTime() < new Date(beginDateVal).getTime() - 8.64e7;
                    }
                    else {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            }

其余的验证大多如此，不外乎data下初始值，rules下的规则，以及vue之外做回调拓展赋值验证 ，这里不一一列举，如此验证过后，便是提交

                //提交表单 formName 表单所在的model值
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                      //验证通过
                       ....

                    } else {
                        return false;
                    }
                });

form表单提交到后台是根据键值对来进行提交[ Name:‘’，Value:''] ，对于小小的若干个字段，选择 $.post() 提交很适合，构造一下需要传递的参数即可，不过在实际应用中可能会稍微麻烦一些，一般是提交多个字段，表格，以及表格+若干字段混合的形式。其实大部分而言，都是若干个字段，这种情况，在后台用一个包含这些字段的实体统一接收,采用传统的序列化表单的形式（$("#form1").serialize()），前端采用 ajax 方式提交

       $.ajax({
           type: "POST",
           url: tempurl,
           data: $("#form").serialize(),
           datatype: 'json',
           success: function (msg) {
           vm.loading = false;
           if (msg.Code == 0) {
                this.$message("操作成功");
                location.href = oldUrl;
                return;
              }
           return this.$message("操作失败:" + msg.Desc);
            }
       })

对于vue 提交简单表单对象来说，无须序列化表单，先将表单内待提交元素的prop 值（和Name一一对应） 写入表单对象名（ruleForm）下，

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="评比标题" prop="Title">
                <el-col :span="4"><el-input v-model="ruleForm.Title" :disabled="diabol"></el-input></el-col>
            </el-form-item>

            <el-form-item label="评比时间" required :inline="true">
                <el-col :span="4">
                    <el-form-item prop="StartTime">
                        <el-date-picker type="date" :disabled="diabol" placeholder="选择开始日期" :picker-options="startTimeOptions" 
                         value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="ruleForm.StartTime" style=" 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="1" style="text-align:center">   -</el-col>
                <el-col :span="4">
                    <el-form-item prop="EndTime">
                        <el-date-picker type="date" :disabled="diabol" placeholder="选择结束日期" :picker-options="endTimeOptions" 
                         value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="ruleForm.EndTime" style=" 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
        </el-form>

    var vm = new Vue({
        el: "#app",
        data: {
            ruleForm: {
                Title: '',
                StartTime：'',
                EndTime:''
                Name:'',
                ....
            },
         }
     })

 然后 ajax提交的时候,仅需稍微变成数据为，data: vm.ruleForm 即可，当然这都是很基础的，有时候我们既要提交表单，又要提交表格数据，我目前的处理方式为 将表格数据的name 构造成带索引的形式 如  StuList [i].Name ,看起来很土，也曾做过多次验证，暂未找到更合适的处理方法，这里的 StuList为 后台接收实体中 对应表格数据的集合字段 名，如 List<Student> StuList , 接收实体中其余的字段，如标题Title，StartTime，EndTime 等，需要构造成 数组对象里面的值，如

    //构造表单数据（不包含表格）                     
     var formdata = [];
     $.each(vm.ruleForm, function (i, v) {
          var temp = { name: i, value: v };
            formdata.push(temp);
     });

      //构造表格数据
      $.each(rows, function (i, v) {
         var tempName=  { name: "StuList[" + i + "].Name", value: v.Name};
         var tempClass= { name: "StuList[" + i + "].ClassName", value: v.ClassName};
         formdata.push(tempName);
         formdata.push(tempClass);
      });

这里表格仅需要获取Name 和ClassName 两个字段，所以each 一次就好，如果字段过多，在加一个each ，自动获取 其 name 和 value 即可，这里需要注意的是，要拿到所有表格的数据，而不是当前页显示的表格数据，如我这里用的是JqGrid，就有一个坑

          //获取表格              
          var o = jQuery("#grid-table");
          //获取表格当前页显示的数据（如表格2页，当前页是第一页，则取第一页数据）
          //var rows = o.jqGrid('getRowData');
          var total = o.jqGrid('getGridParam', 'records'); //获取查询得到的总记录数量（所有页）
          o.jqGrid('setGridParam', { rowNum: total }).trigger('reloadGrid'); //设置rowNum为总记录数量并且刷新jqGrid，使所有记录现出来调用getRowData方法才能获取到所有数据
          var rows = o.jqGrid('getRowData');  //输出所有匹配的（所有页数据）