element-ui form表单验证的基本步骤

最新推荐文章于 2025-05-04 15:41:37 发布

_阿杰不会写代码_

最新推荐文章于 2025-05-04 15:41:37 发布

阅读量1.2k

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_54241338/article/details/121633028

版权

form表单基本步骤可分为三步:

步骤一: 在data()中按照格式定义规则

示例:

rules: {
    user: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

步骤二:

给 el-form 组件绑定 model 为表单数据对象
给 el-form 组件绑定 rules 属性配置验证规则
给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

<el-form label-width="80px" :model="form" :rules="rules" ref="ruleForm">
  <el-form-item label="用户名" prop="user">
    <el-input v-model="form.user"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </el-form-item>
</el-form>

注意: 当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

步骤三: 手动兜底校验

格式:

element-ui的表单组件.validate(valid => {    
        if(valid) {       
            // 通过了验证   
          } else {         
            // 验证失败    
          }})

示例:

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

说明：

validate 方法是表单组件自带的，用来对表单内容进行检验。
需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证