详解 vue + element-ui form表单validate验证

最新推荐文章于 2025-05-29 15:46:55 发布

guoqingtai

最新推荐文章于 2025-05-29 15:46:55 发布

阅读量1.9w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： VUE js element-ui 文章标签： vue elementui vue.js 前端 javascript

本文链接：https://blog.csdn.net/guoqingtai/article/details/115415923

VUE 同时被 3 个专栏收录

6 篇文章

订阅专栏

5 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用el-form组件进行表单验证和提交。通过设置ref='myform'指定表单名，:rules='myrules'定义校验规则，以及prop定义表单项，实现了手机号码的必填和格式校验。在data中定义校验规则，如手机号码的required和正则表达式。提交表单时，通过$refs['myform'].validate进行验证。若需要不同校验场景，只需在点击时动态改变rules即可。

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

定义form名称为myform，校验规则用myrules 先记住这两个名字

使用ref="myform"来指定表单名
使用:rules="myrules"指定校验规则
这两个属性一定放在el-form中。

      <el-form ref="myform" :model="form" :rules="myrules" label-width="100px">
            .......
      </el-form-item>

在el-form中定义需要校验的表单项myformitem

使用prop定义el-form-item的名称，注意一定不要把标签放到input 上。

        <el-form-item label="表单项" prop="myformitem">
          <el-input v-model="ruleForm.phone"  maxlength="11" />
        </el-form-item>

综上所述，表单代码如下：

      <el-form ref="myform" :model="form" :rules="myrules" label-width="100px">
        <el-form-item label="表单项" prop="myformitem">
          <el-input v-model="ruleForm.phone"  maxlength="11" />
        </el-form-item>
      </el-form-item>

在data中定义校验规则，校验规则要针对每一个上节定义好formitem进行校验，可以有required 也可以有正则表达式。

        myrules: {
          myformitem: [
            {
              required: true,
              message: "手机号码不能为空",
              trigger: "blur"
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],

触发myform提交的代码这样写

this.$refs["myform"].validate(valid => {
     if (valid) {
       console.log("submit here!")
     } 
});

详解 vue + element-ui form表单validate验证

定义form名称为myform，校验规则用myrules 先记住这两个名字

在el-form中定义需要校验的表单项myformitem

综上所述，表单代码如下：

在data中定义校验规则，校验规则要针对每一个上节定义好formitem进行校验，可以有required 也可以有正则表达式。

触发myform提交的代码这样写

如果多个按钮的校验方式不同，比如发送短信码+登录页面，短信码只要校验 手机号字段，登录要校验手机号和验证码两个字段怎么办？答案是：点击的时候给rules赋不同值就可以了。

如果多个按钮的校验方式不同，比如发送短信码+登录页面，短信码只要校验手机号字段，登录要校验手机号和验证码两个字段怎么办？答案是：点击的时候给rules赋不同值就可以了。