element-ui中表单校验：密码长度为 4-16 位，用户账号由 数字、字母 组成

在 element-ui 中表单校验，可以使用 `el-form` 组件中的 `rules` 属性来进行校验。具体实现代码如下：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="账号" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]+$/, message: '账号只能由数字、字母组成', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 16, message: '密码长度为 4-16 位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单校验通过，执行表单提交操作
          console.log('submit form')
        } else {
          // 表单校验不通过，给出提示信息
          console.log('validate failed')
        }
      })
    }
  }
}
</script>

在上面的代码中，我们使用了 `el-form` 组件来包含表单数据，并使用 `rules` 属性来定义表单校验规则。其中，`rules` 属性是一个对象，对象的属性名为表单项的 `prop` 属性值，属性值为一个数组，数组中包含多个校验规则。每个校验规则对象包含三个属性：

- `required`：是否必填，默认为 `false`。
- `message`：校验提示信息。
- `trigger`：触发校验的方式，可以是 `blur`（失去焦点时校验）、`change`（值改变时校验）或 `submit`（提交表单时校验）。

在示例中，我们定义了两个表单项：账号和密码。账号需要满足只能由数字、字母组成的规则，而密码需要满足长度为 4-16 位的规则。在表单提交时，我们通过 `this.$refs.form.validate()` 方法来执行表单校验操作，如果校验通过，则执行表单提交操作，否则给出相应的提示信息。