Vue+Element-Ui 异步表单效验

　　简单的效验

 

　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>

 

转载于:https://www.cnblogs.com/luffyxin/p/10083719.html