Vue宝典之深入理解 rules 属性

rules属性是Vue.js中用于表单验证的一个重要属性，它是一个对象，包含了各种验证规则。这些规则是用来确保表单输入的数据是有效的，可以防止用户输入无效或者不符合要求的数据。

以下是一些使用rules属性的方法：

1. 基础用法：

data() {
  return {
    form: {
      name: ''
    },
    rules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ]
    }
  };
}

在这个例子中，我们定义了一个名为name的表单字段，并为其设置了一个必填的验证规则。如果用户在输入框中没有输入任何内容并且焦点离开输入框，这时候就会触发这个规则，并弹出一个提示“请输入姓名”。

2. 使用函数进行复杂验证：

data() {
  return {
    form: {
      age: ''
    },
    rules: {
      age: [
        { validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('年龄不能为空'));
            }
            if (!/^[1-9]\d*$/.test(value)) {
              callback(new Error('请输入正确的年龄格式'));
            } else {
              callback();
            }
          }, 
          trigger: 'blur' 
        }
      ]
    }
  };
}

在这个例子中，我们定义了一个名为age的表单字段，并为其设置了一个自定义验证规则。这个规则会检查用户输入的内容是否为空，并且是否是一个正确的年龄格式（即一个正整数）。如果不满足这些条件，就会触发这个规则并弹出相应的提示。

3. 使用多个验证规则：

data() {
  return {
    form: {
      email: ''
    },
    rules: {
      email: [
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
        { min: 5, max: 30, message: '邮箱长度在5到30个字符', trigger: 'blur' }
      ]
    }
  };
}

在这个例子中，我们定义了一个名为email的表单字段，并为其设置了两个验证规则。第一个规则检查用户输入的是否是一个有效的邮箱地址，第二个规则检查用户输入的邮箱地址是否在5到30个字符之间。如果用户输入不满足这些条件，就会触发相应的规则并弹出提示。

4. 使用异步验证：

data() {
  return {
    form: {
      username: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { validator: (rule, value, callback) => {
            setTimeout(() => {
              if (value === 'admin') {
                callback(new Error('用户名已存在'));
              } else {
                callback();
              }
            }, 1000);
          }, 
          trigger: 'blur' 
        }
      ]
    }
  };
}

在这个例子中，我们定义了一个名为username的表单字段，并为其设置了一个异步自定义验证规则。