Alex D

const form = document.forms.form
const err = document.getElementById("error")

form.addEventListener("submit", function(event) {
    event.preventDefault()

    const name = form.name.value.trim()
    const pass = form.password.value.trim()
    const repass = form.repass.value.trim()
    const state = form.state.value.trim()

    let fail = ""
    if (name === "" || pass === "" || repass === "" || state === "") {
        fail = "Заполните все поля"
    } 

    else if (name.length < 2 || name.length > 50) {
        fail = "Введите имя длиной от 2 до 50 символов"
    } 

    else if (pass !== repass) {
        fail = "Пароли не совпадают"
    } 

    else if (pass.includes("&")) {
        fail = "Пароль не должен содержать символ &"
    }

    if (fail) {
        displayError(fail)
    } else {
        alert("Все данные успешно сохранены")
        window.location.href = "https://google.com"
    }
});

// Функция для отображения ошибки
function displayError(message) {
    err.textContent = message
    err.classList.add("error-active")
}

// Функция для скрытия ошибки
function hideError() {
    err.textContent = ""
    err.classList.remove("error-active")
}

import { storeToRefs } from 'pinia'
import { useStore } from '@/store/userStore'

export default {
  setup() {
    const userStore = useStore()
    const { news, user } = storeToRefs(userStore)
    return { userStore, news, user }
  },
  data() {
    return {
      postOpen: false,
      postNews: null,
      postTitle: null,
      postContent: null,
      createNews: false,
      editNews: false,
      loadedPosts: 5,
      alert: null,
    }
  }
}
<template>
{{ news }} //Можно работать сразу в шаблоне
</template>

<template>
  	<div>Name - {{name}}</div>
		<div>Name - {{age}}</div>
  	<div>Name - {{job}}</div>
    <div class="w-25">
        <div class="mb-3">
            <input v-model="name" autosize type="text" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <input v-model="age"  autosize type="text" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <input v-model="job" autosize type="text" placeholder="Please input"/>
        </div>
        <div class="mb-3">
          <a href="#" @click.prevent="addPerson" class="btn btn-primary">Добавить</a>
        </div>
    </div>
</template>

<script setup>

import {ref} from 'vue'
  
const name = ref("")
const age = ref ("")
const job = ref("")

function addPerson() {
  name.value = 'Alex'
  age.value = '21'
  job.value = 'Driver'
}

/*
function addPerson() {
  axios.post('/api/anketa', {name: this.name, age: this.age, job: this.job}) 
    .then(res =>{
    	name.value = res.data.name
    	age.value = res.data.age
    	job.value = res.data.job
    console.log(res);
  })
}
*/
</script>