简单的效验
Form 组件提供了表单验证的功能,只需要通过 rules
属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名
/* ruleForm :表单绑定的数据
rules : 表单效验规则
ref="ruleForm" : 表示el-form 这个Dom 节点
*/
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" > <el-form-item label="活动名称" prop="name"> //el-form-item 上面必须要设置 prop 属性prop对应绑定的model值 <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form> <script> export default { data() { return { ruleForm: { name: '', }, rules: {
//name 对应 prop 的值 name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) {
//调用表单节点的效验方法
this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }
} } </script>
然后是自定义效验
<template> <el-dialog title="添加新团队" :visible.sync="showNewTeamDialog"> <el-form :rules="rules" ref="newTeam" :model="newTeam" label-width="100px"> <el-form-item label="团队名称" id="teamName" prop="teamName" ref="teamName"> <el-input v-model="newTeam.teamName" placeholder="团队名称" :style="{'width':inputWidth}"></el-input> </el-form-item> <div class="postButtons"> <el-form-item> <el-button v-if="drugSearch_btn_edit" type="primary" @click="onSubmit('newTeam')" style="width:100px">确定</el-button> <el-button @click="showNewTeamDialog = false" style="width:100px">取消</el-button> </el-form-item> </div> </el-form> </el-dialog> </template> <script>
/*
import {
verifyTeamName
} from 'api/doctorTeam/doctorTeamApi'
api/doctorTeam/doctorTeamApi 里面的方法如下
export function verifyTeamName(params) {
return fetch({
url: '/api/nphc/doctorTeam/verifyTeamName',
method: 'post',
params: params
});
}
*/
export default {
data() { //在return 上面写自定义效验方法 const checkTeamName = (rule, value, callback) => { if (!value) {
//callback 是提示的信息 return callback(new Error('团队名不能为空')); } else {
//调用封装了的异步效验方法, verifyTeamName(this.newTeam).then(response => { if (response.result.errcode != '0') { console.log("效验失败"); } else { if (response.body[0] === 0) { console.log(response.body[0]); callback(); } else { callback("已存在该队名"); } } }); } }; return { rules: { teamName: [{ validator: checkTeamName, trigger: 'blur' }], }, newTeam: { teamName: undefined }, } }, methods: { // 新增团队提交 onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { addTeam(this.newTeam).then(response => { if (response.result.errcode != '0') { console.log("添加团队失败"); } else { this.newTeam.captainId = undefined; this.newTeam.hospitalId = undefined; this.$message('添加团队成功'); this.getList(); } }); this.showNewTeamDialog = false; } else { console.log('error submit!!'); return false; } }); }, doAdd() {
//重置表单清除表单数据和效验 this.$nextTick(function() { if (this.$refs.newTeam !== undefined) this.$refs.newTeam.resetFields(); }) this.showNewTeamDialog = true; }, } } </script>
所有评论(0)