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>
相关推荐
浪裡遊8 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句1 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1011 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im1 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端1 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军1 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心2 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝2 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
卸任2 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js