elementui检验、elementui输入框校验

《elementui检验、elementui输入框校验》

在使用Element UI进行开发时，对于表单中输入框的校验是非常重要的一环。解决输入框校验问题，我们可以利用Element UI提供的表单验证功能，通过定义规则来确保用户输入的数据符合预期。

一、使用rules属性进行校验

这是最常见的一种思路。在创建表单组件时，给el-form绑定model属性，用于存储表单数据；同时设置rules属性，用来定义各个字段的校验规则。

html

  
    
      
    
    
      提交
    
  
</p>


export default {
  data() {
    return {
      ruleForm: {
        username: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    }
  }
};


<p>

在这个例子中，prop属性对应rules中的键名，当用户名为空时会提示“请输入用户名”，并且要求用户名长度在3 - 10个字符之间。点击提交按钮时触发submitForm方法，通过this.$refs[formName].validate()对整个表单进行校验。

二、自定义校验规则

有时候默认的校验规则可能不能满足需求，这时可以自定义校验函数。

html

  
    
      
    
    
      提交
    
  
</p>


export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        // 密码必须包含数字和字母
        const reg = /^(?=.*d)(?=.*[a-zA-Z])[da-zA-Z]{6,}$/;
        if (!reg.test(value)) {
          callback(new Error('密码必须包含数字和字母且至少6位'));
        } else {
          callback();
        }
      }
    };
    return {
      ruleForm: {
        password: ''
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    }
  }
};


<p>