vue form 表单验证-我的

qq_27084325

于 2020-05-12 19:16:30 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css vue.js html javascript

本文链接：https://blog.csdn.net/qq_27084325/article/details/106083000

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在Vue.js中进行表单验证的方法，包括名称设置、提交名称的处理、rules验证规则的配置、错误文字提示的显示以及表单提交的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue form 表单验证

名称设置

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

提交名称

// ruleForm
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>

rules 设置

 rules: {
          // 长度
          name: [
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          // 输入框 blur，下拉框 change，单选框 change
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          // 日期
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          // 数组
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ]
        }

文字提示

// region 对应 rules.region
<el-form-item label="活动区域" prop="region">

提交处理

 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },