[Vuejs]-Vuetify validation using Model or Controller

0👍

You can add rules attribute on v-text-field tag to control fading validation.

<v-text-field :rules="codeRules" dense outlined label="Employee Code" v-model="emp_code"></v-text-field>
<v-text-field :rules="nameRules" dense outlined label="Employee Name" v-model="emp_name"></v-text-field>
export default {
    data: () => ({
      firstName: '',
      codeRules: [
        value => {
          if (/^\d+(\.\d+)?$/.test(value)) return true
          return 'Employee Code must be a number.'
        },
      ],
      nameRules: [
        value => {
          if (/^[A-Za-z]+$/.test(value)) return true
          return 'Employee Name must be a letter.'
        },
      ],
    }),
  }

0👍

This is already answered by my friend from other country after i reached him.
This is how he do it.

Giving this MVC Model Flow
enter image description here

Home.vue

<v-row dense>
                <v-col cols="2">
                    <v-text-field dense outlined label="Employee Code" v-model="myObj.EmployeeCode"></v-text-field>
                </v-col>
                <v-col cols="3">
                    <v-text-field dense outlined label="Employee Name" v-model="myObj.EmployeeName"></v-text-field>
                </v-col>
                <v-col cols="2">
                    <v-text-field dense outlined label="Age" v-model="myObj.Age"></v-text-field>
                </v-col>
                <v-col cols="2">
                    <v-btn @click="Insert()">INSERT</v-btn>
                </v-col>
            </v-row>

mydata is…

data(){
            return {
                myObj:{
                    EmployeeCode: '',
                    EmployeeName: '',
                    Age: '',
                    EmployeeDeletedAt: '',
                }

Then, my method is…

 methods:{
        Insert(){
                axios.post(`api/employees`,this.myObj)
                .then(res => {
                    if(res.data instanceof Array){
                        console.log(res.data)
                        alert('Insert Successful!')
                    }else{
                        alert(res.data)
                    }
                }).catch(({response}) => {
                    this.$router.push('/error/' + response.status)
                })
            }
}

Controller.php

public function store(Request $req)
    {
        try {
            $employee_model = new EmployeeModel();
            $employee_model->InsertEmployee($req);
            return $employee_model->EmployeeList();
        } catch(\Exception $e) {
            $err_data = ['Parameters' => $req, 'Functions' => __FUNCTION__];
            throw new CommonException($e, $err_data, 500);
        }
    }

Model.php

public function InsertEmployee($req){
        $dao_employee = new DAO();
        $existing = $dao_employee::ExistingEmployeeCode($req->input('EmployeeCode'));
        if($existing){
            return 'Existing Employee Code!';
        }else if(trim($req->input('EmployeeCode')) == ''){
            return 'Please input employee code!';
        }else if(trim($req->input('EmployeeName')) == ''){
            return 'Please input employee name!';
        }else if(trim($req->input('Age')) == ''){
            return 'Please input age!';
        }else if(strlen(trim($req->input('EmployeeCode'))) != 5){
            return 'Employee code must be 5 characters only';
        }else if(!is_numeric(trim($req->input('Age')))){
            return 'Age must be number only';
        }else{
            DB::transaction(function () use($req, $dao_employee){
                $dao_employee::InsertEmployee($req);
            });
        }
    }

DAO.php

public static function InsertEmployee($req){
        Employee::insert(
            [
                'EmployeeCode' => $req->input('EmployeeCode'),
                'EmployeeName' => $req->input('EmployeeName'),
                'Age' => (int)$req->input('Age'),
                'created_at' => date('Y-m-d H:i:s'),
                'updated_at' => date('Y-m-d H:i:s'),
                'deleted_at' => null,
                'UpdatedBy' => '12345'
            ]
        );
    }

I hope this could help for future reference.

Leave a comment