Vue常见页面（管理+详情+编辑+新增）八、表单规则校验（ref、model、rules、prop）和重置功能
Vue常见页面（管理+详情+编辑+新增）八、表单规则校验（ref、model、rules、prop）和重置功能
规则校验
背景
如图所示，我们需要将红框内的内容限定为必填
表单
<el-form ref="commitForm" :rules="rules" :model="projectdetail" label-width="120px"> <el-form-item label="项目名称" prop="project_name"> <el-select v-model="project" @change="changeProgram" placeholder="请选择项目名称"> <el-option v-for="(item, index) in options" :key="item.project_id" :label="item.project_name" :value="`${item.project_id}-${index}`" ></el-option> </el-select> </el-form-item> <el-form-item label="用户组" > <span>{{projectInfo.group_list}}</span> </el-form-item> <el-form-item label="服务名" > <el-input v-model="projectdetail.service"></el-input> </el-form-item> <el-form-item label="提测内容" prop="content"> <el-input type="textarea" placeholder="请输入内容" v-model="projectdetail.content" maxlength="30" show-word-limit > </el-input> </el-form-item> <el-form-item label="影响范围" prop="influence"> <el-input type="textarea" placeholder="请输入内容" v-model="projectdetail.influence" maxlength="30" show-word-limit > </el-input> </el-form-item> <el-form-item label="wiki方案说明" prop="wiki"> <el-input v-model="projectdetail.wiki"></el-input> </el-form-item> <el-form-item label="项目研发负责人"> <span>{{projectInfo.main_rd_name}}</span> </el-form-item> <el-form-item label="项目测试负责人"> <span>{{projectInfo.main_qc_name}}</span> </el-form-item> <el-form-item label="代码review人" prop="reviewer_id"> <el-select v-model="reviewer" @change="changeReview" placeholder="请选择代码review人"> <el-option v-for="(item, index) in users" :key="item.user_id" :label="item.real_name" :value="`${item.user_id}-${index}`" ></el-option> </el-select> </el-form-item> <el-form-item label="提测分支" prop="branch"> <el-input v-model="projectdetail.branch"></el-input> </el-form-item> </el-form>参数体
data
// 表单提交信息 projectdetail:{ project_id:'', project_name:'', group_id:'', group_name:'', service:'', content:'', influence:'', wiki:'', main_rd_id:'', main_qc_id:'', reviewer_id:'', branch:'', apollo_desc:'', database_desc:'', interface_desc:'', xxl_desc:'', redis_desc:'', mq_desc:'' }rules:{ project_name:[ {required:true,message:'请选择项目名称',trigger:'change'} ], content:[ {required:true,message:'请输入体测内容',trigger:'blur'} ], influence:[ {required:true,message:'请输入影响范围',trigger:'blur'} ], wiki:[ {required:true,message:'请输入wiki方案说明',trigger:'blur'} ], reviewer_id:[ {required:true,message:'请选择代码review人',trigger:'change'} ], branch:[ {required:true,message:'请输入提测分支',trigger:'blur'} ], }页面展示效果
发现在我们校验的地方已经展示出了红色星号
提交按钮的校验
上面的只是在页面上展示，而已，并没有在提交时候做校验，那我们拿来element-ui的原话
回调函数的方式
<el-form-item> <el-button type="success" plain @click="save">保存</el-button> </el-form-item>methods
save() { // 在提交的时候我们需要校验，到底有没有按照规则填写，this.$refs.commitForm这个实例就有表单中参数的规则校验结果，validate是实例的一个方法，在回调函数中有参数valid，如果全部符合rules的规则，则为true，反之为false // 还有一个参数就是到底哪些没有符合条件，也会返回出来 this.$refs.commitForm.validate((valid,error)=>{ console.log(error) console.log("规则校验结果="+valid) if(!valid){ // 如果valid部位true，则弹窗提示 this.$message.error("内容填写有误"); } }) console.log(this.projectdetail) //在验证完参数的合法性之后，再去请求接口 insertTestSheet(this.projectdetail).then(response=>{ console.log(response.result) }) }提交按钮的展示效果
点击提交按钮message提示弹出
我们再来看一下validate里的valid和error分别是啥
不传入回调函数的方式
save() { // 在提交的时候我们需要校验，到底有没有按照规则填写，this.$refs.commitForm这个实例就有表单中参数的规则校验结果 //.then()代表如果所有的验证都通过了，.catch()代表有的验证没有通过 this.$refs.commitForm.validate() .then((a)=>{ console.log(a) }) .catch((b)=>{ console.log(b) }) }提交按钮的展示效果
没有通过验证，走到了catch分支，返回了false
通过了验证，走到了then分支，返回了true
个人推荐还是使用带回调函数的，因为回调函数里会告诉你哪些参数是不合要求的，你可以将其打印到message提醒用户，更有针对性
重置功能
背景
点击重置按钮，清空输入框
表单
<el-form :inline="true" id="form-one" class="formonr" ref="queryForm" :model="queryParam"> <el-row type="flex" justify="left"> <el-col :span="20" id="colone"> <el-form-item label="项目名称" prop="test_name"> <el-input placeholder="模糊搜索" v-model="queryParam.test_name"></el-input> </el-form-item> <el-form-item label="测试单状态" prop="status_yn"> <el-select v-model="value" placeholder="请选择" clearable @change="changeStatus"> <el-option v-for="(item, index) in options" :key="item.status_yn" :label="item.status_name" :value="`${item.status_yn}-${index}`"> </el-option> </el-select> </el-form-item><el-form-item> <el-button type="primary" @click="querySheet">查询</el-button></el-form-item><el-form-item> <el-button type="primary" @click="$refs.queryForm.resetFields()">重置</el-button></el-form-item> <el-form-item> <el-button type="primary" @click="sheetInsert">新建</el-button></el-form-item> </el-col> </el-row> </el-form> data
queryParam:{ pageNo:1, pageSize:10, test_name: "", status_yn: "", reviewer: "" }, value:""