form表单的使用

模板

javascript 复制代码
<template>
 <el-form :model="formData"  ref="form1Ref" :rules="rules">
  <el-form-item label="手机号" prop="tel">
           <el-input v-model="formData.tel" />
  </el-form-item>

  <el-form-item>
          <el-button type="primary" @click="submitForm()">注册</el-button>
          <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>
</template>


<script setup lang="ts">

const formData = reactive({
    tel: '',
    code: '',

})

const rules = reactive({
  
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' },
    ],
 


})

const submit = () => {
    console.log(formData);

}

const form1Ref = ref() // XXXXRef 是查找原生的dom对象 ? 在vue中如何获取原生的dom组件
const submitForm = async () => {

    await form1Ref.value.validate((valid: any, fields: any) => {
        if (valid) {
            submit()
        }
    })
}
const resetForm = () => {

    form1Ref.value.resetFields()
}
</script>
相关推荐
星空寻流年3 小时前
css3伸缩盒模型第二章(侧轴相关)
javascript·css·css3
GalenWu5 小时前
对象转换为 JSON 字符串(或反向解析)
前端·javascript·微信小程序·json
GUIQU.5 小时前
【Vue】微前端架构与Vue(qiankun、Micro-App)
前端·vue.js·架构
zwjapple5 小时前
“ES7+ React/Redux/React-Native snippets“常用快捷前缀
javascript·react native·react.js
数据潜水员5 小时前
插槽、生命周期
前端·javascript·vue.js
优雅永不过时·5 小时前
实现一个漂亮的Three.js 扫光地面 圆形贴图扫光
前端·javascript·智慧城市·three.js·贴图·shader
揣晓丹6 小时前
JAVA实战开源项目:健身房管理系统 (Vue+SpringBoot) 附源码
java·vue.js·spring boot·后端·开源
景尘6 小时前
vue3 全局注册自定义指令,input聚焦失焦展示对应值
vue.js
春天姐姐8 小时前
vue知识点总结 依赖注入 动态组件 异步加载
前端·javascript·vue.js
Pop–9 小时前
Vue3 el-tree:全选时只返回父节点,半选只返回勾选中的节点(省-市区-县-镇-乡-村-街道)
开发语言·javascript·vue.js