vue element-ui from表单验证

    <template>
      <el-form
    ref="userForm"
    :rules="rules"
    :model="userForm"
    label-width="80px"
    style="margin:20px;width:40%;min-width:400px;"
      >
    <el-form-item label="员工姓名" prop="name">
      <el-input v-model="userForm.name"></el-input>
    </el-form-item>
    <el-form-item label="员工性别" prop="sex">
      <el-radio-group v-model="userForm.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="员工职位" prop="position">
      <el-select v-model="userForm.position_id" placeholder="请选择职位">
        <el-option
          v-for="(item, index) in positionList"
          :label="item.position_name"
          :value="item.id"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属站点" v-if="websiteShow">
      <el-select v-model="userForm.website" placeholder="请选择站点">
        <el-option
          v-for="(item, index) in websiteList"
          :label="item.website_name"
          :value="item.id"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="身份证号" prop="card">
      <el-input v-model="userForm.card"></el-input>
    </el-form-item>
    <el-form-item label="员工昵称" prop="nickname">
      <el-input v-model="userForm.nickname"></el-input>
    </el-form-item>
    <el-form-item label="员工电话" prop="phone">
      <el-input v-model="userForm.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.native.prevent="onSubmit">立即添加</el-button>
      <el-button @click.native.prevent>取消</el-button>
    </el-form-item>
      </el-form>
    </template>

    data () {
    return {
      userForm: {
        name: '',
        sex: '',
        card: '',
        nickname: '',
        position_id: '',
        header_pic: '',
        phone: '',
        password: '',
        website: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入员工真实姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择员工性别', trigger: 'change' }
        ],
        position: [
          { required: true, message: '请选择员工职位', trigger: 'change' }
        ],
        card: [
          { required: true, message: '请输入员工真实姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入员工真实姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }
        ]
      },
      websiteList: [],
      positionList: [
        {
          'id': 0,
          position_name: '管理员'
        },
        {
          'id': 1,
          position_name: '客服'
        },
        {
          'id': 2,
          position_name: '站长'
        },
        {
          'id': 3,
          position_name: '员工'
        }
      ]
    }
      }