這個 Laravel 和 Vue 應用程序中數據驗證失敗的原因是什么？

Question

我正在開發一個由 Laravel 8 API 和 Vue 3 前端組成的應用程序。

我有一個驗證失敗的注冊表單。

在users表遷移文件中，我有：

class CreateUsersTable extends Migration {
 public function up() {
  Schema::create('users', function (Blueprint $table) {
      $table->id();
      $table->string('first_name');
      $table->string('last_name');
      $table->string('email')->unique();
      $table->timestamp('email_verified_at')->nullable();
      $table->string('password');
      $table->unsignedInteger('country_id')->nullable();
      $table->foreign('country_id')->references('id')->on('countries');
      $table->rememberToken();
      $table->timestamps();
   });
 }
 // More code here
}

從上面可以看出， countries表中的id是users表中的外鍵。

我在AuthController中有這段代碼來注冊一個新用戶：

class AuthController 擴展 Controller {

 public function countries()
 {
    return country::all('id', 'name', 'code');
 }
    
 public function register(Request $request) {

 $rules = [
  'first_name' => 'required|string,',
  'last_name' => 'required|string',
  'email' => 'required|email|unique:users,email',
  'password' => 'required|string|confirmed',
  'country_id' => 'required|exists:countries',
  'accept' => 'accepted',
  ];

  $customMessages = [
   'first_name.required' => 'First name is required.',
   'last_name.required' => 'Last name is required.',
   'email.required' => 'A valid email is required.',
   'email.email' => 'The email address you provided is not valid.',
   'password.required' => 'A password is required.',
   'password.confirmed' => 'The passwords do NOT match.',
   'country_id.required' => 'Please choose a country.',
   'accept.accepted' => 'You must accept the terms and conditions.'
];

 $fields = $request->validate($rules, $customMessages);

 $user = User::create([
    'first_name' => $fields['first_name'],
    'last_name' => $fields['last_name'],
    'email' => $fields['email'],
    'password' => bcrypt($fields['password']),
    'country_id' => $fields['country_id']
 ]);

 $token = $user->createToken('secret-token')->plainTextToken;

 $response = [
    'countries' => $this->countries(),
    'user' => $user,
    'token' => $token
 ];

 return response($response, 201);
 }
}

在前端，我有：

const registrationForm = {
    data() {
     return {
      apiUrl: 'http://myapp.test/api',
      formSubmitted: false,
      countries: [],
      fields: {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        country_id: 0,
        accepted: '',
      },
      errors: {},
    };
  },
  methods: {
    // Select country
    changeCountry(e) {
      if(e.target.options.selectedIndex > -1) {
        this.country_id = parseInt(e.target.options[e.target.options.selectedIndex].value);
      }
    },

    // get Countries
    getCountries(){
      axios.get(`${this.apiUrl}/register`).then((response) =>{
        // Populate countries array
        this.countries = response.data;
      }).catch((error) => {
         this.errors = error.response.data.errors;
      });
    },

    registerUser(){
      // Do Registrarion
      axios.post(`${this.apiUrl}/register`, this.fields).then(() => {
        // Show success message
        this.formSubmitted = true;

        // Clear the fields
        this.fields = {}

      }).catch((error) => {
        this.errors = error.response.data.errors;
      });
    }
  },
  created() {
    this.getCountries();
  }
};

Vue.createApp(registrationForm).mount("#myForm");

在 Vue 模板中：

<form id="myForm">
    <div v-if="formSubmitted" class="alert alert-success alert-dismissible">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      Your account was created :)
    </div>

    <div class="form-group" :class="{ 'has-error': errors.first_name }">
    <input type="text" class="form-control" placeholder="First name" v-model="fields.first_name">
    <span v-if="errors.first_name" class="error-message">{{ errors.first_name[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.last_name }">
    <input type="text" class="form-control" placeholder="Last name" v-model="fields.last_name">
    <span v-if="errors.last_name" class="error-message">{{ errors.last_name[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.email }">
    <input type="email" class="form-control" placeholder="Enter email" v-model="fields.email">
    <span v-if="errors.email" class="error-message">{{ errors.email[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.password }">
    <input type="password" class="form-control" placeholder="Enter password" v-model="fields.password">
    <span v-if="errors.password" class="error-message">{{ errors.password[0] }}</span>
  </div>

  <div class="form-group" :class="{ 'has-error': errors.password_confirmation }">
    <input type="password" class="form-control" placeholder="Confirm password" v-model="fields.password_confirmation">
    <span v-if="errors.password_confirmation" class="error-message">{{ errors.password_confirmation[0] }}</span>
  </div>

  <div class="form-group">
    <select class="form-control" @change="changeCountry">
       <option value="0" selected>Select your country</option>
       <option v-for="country in countries" :value="country.id">{{ country.name }}</option>
    </select>
  </div>

  <div class="form-group accept pl-1" :class="{ 'has-error': errors.accept }">
    <input type="checkbox" name="accept" v-model="fields.accept">
    <span class="text text-muted pl-1">By creating an account I accept <a href="#" class="text-link">Terms & Privacy Policy</a></span>
    <span v-if="errors && errors.accept" class="error-message">{{ errors.accept[0] }}</span>
  </div>

  <div class="form-group mb-0">
    <button @click.prevent="registerUser" type="submit" class="btn btn-sm btn-success btn-block">Register</button>
  </div>
</form>

問題

我填寫了表格，選擇了一個國家，但是當我提交時，它以422 狀態失敗，並且網絡選項卡顯示：

{"message":"The given data was invalid.","errors":{"country_id":["The selected country id is invalid."]}}

問題

我究竟做錯了什么？

Answer 1

您在this.country_id （registrationForm 組件）中有錯誤，但屬性country_id是this.fields的子項，您將fields發送到服務器。 正確的將是：

this.fields.country_id = parseInt(e.target.options[e.target.options.selectedIndex].value);