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>