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>
相关推荐
XiaoMu_0014 分钟前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静10 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia23 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_25 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia26 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
子兮曰34 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
小桥风满袖38 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
用户479492835691539 分钟前
面试官:讲讲css样式的优先级
前端·javascript·面试
EndingCoder44 分钟前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge
鹏多多1 小时前
Vue3响应式原理Proxy的深度剖析
前端·javascript·vue.js