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>
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君0110 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色12 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅12 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试