自制手机网站_建一个网页需要多少钱_湖南seo优化_东莞seo网站排名优化公司

第一准备一个表单

form.vue

<template><div><el-form><el-form-item label="姓名" prop="name"><el-input v-model="data.name" placeholder="请输入姓名"></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive} from "vue";const data = reactive({name:''
})</script>

第二创建路由

index.js

  {path:'/form',name:'form',component:()=>import('../views/form.vue')},

第三看看是否可以访问

第四步添加验证规则

在<el-form>标签里使用 :rules="data.rules"

在data常量中加入rules对象

rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]
}

当光标失去焦点时就会触发

form.vue完整代码

<template><div><el-form  :rules="data.rules" :model="data"><el-form-item label="姓名" prop="name"><el-input v-model="data.name" placeholder="请输入姓名"></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive,ref} from "vue";const data = reactive({name:'',rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]}
})</script>