Element Ui使用技巧——Form表单的校验规则rules详细说明

最新推荐文章于 2024-07-16 11:10:04 发布

tiankongxiao

最新推荐文章于 2024-07-16 11:10:04 发布

阅读量1.3k

点赞数

文章标签： ui elementui vue.js

原文链接：https://mp.csdn.net/mp_blog/creation/editor

版权

该博客展示了如何在Vue.js应用中实现表单验证，特别是针对密码和确认密码输入的一致性校验。通过`el-form`和`rules`属性，利用自定义验证规则确保用户在输入密码和确认密码时保持一致，从而提高用户体验。

摘要由CSDN通过智能技术生成

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  ......
</el-form>
<script>
  export default {
    data() {
      ......
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          ......
        }
      };
    },
    ......
  }
</script