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="width: 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="width: 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'); //输出所有匹配的（所有页数据）
