elementUI中rules使用时应注意点的地方

最新推荐文章于 2025-05-17 16:16:59 发布

蓝色的落叶

最新推荐文章于 2025-05-17 16:16:59 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementUI

本文链接：https://blog.youkuaiyun.com/qq_38502227/article/details/91884674

elementUI 专栏收录该内容

17 篇文章

订阅专栏

Element UI 的表单验证 rules 模块在实际使用中有一些关键点需要注意。首先，验证规则需要是一个对象数组，每个对象包含 rule 和 message 属性。rule 中可以设置 required、min、max 等属性进行不同类型的验证。其次，对于异步验证，可以使用 asyncRules，并配合 validator 函数来实现。同时，记得在 validator 中返回 Promise 以确保验证流程的正确执行。最后，要留意 rules 中的 immediate 属性，它决定了验证何时触发。默认情况下，当表单字段失去焦点时才会触发验证，但通过设置 immediate 为 true，可以在字段获得值时立即验证。

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

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <script>
      export default {
        data() {
          var checkAge = (rule, value, callback) => {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if (value < 18) {
                  callback(new Error('必须年满18岁'));
                } else {
                  callback();
                }
                //else中的callback()是不能省略的，不然会出问题
              }
          };
          return {
            ruleForm: {
                age: ''
            },
            rules: { 
              age: [
                { validator: checkAge, trigger: 'blur' }
                //如果required: 不为true, type:number也是会出现问题，
                //改成 v-model.number就可以了
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
    </script>