vue中实现基本信息验证

<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef"> 
     <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                  <el-col :span="8">  <el-input v-model="userlist.username" ></el-input></el-col>  
     </el-form-item>  
     <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
               <el-col :span="8">   <el-input v-model="userlist.phone" placeholder="请输入电话"></el-input></el-col>
      </el-form-item>
    <el-form-item label="密码" prop="email" :label-width="formLabelWidth">
                <el-col :span="8">   <el-input v-model="userlist.pass" placeholder="请输入密码"></el-input></el-col>
        </el-form-item>
      <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                <el-col :span="8">   <el-input v-model="userlist.email" placeholder="请输入邮箱"></el-input></el-col>
        </el-form-item>

</el-form >
export default {
  data() {
   rules: {
       username:[{required: true, message: "请输入用户名"} ]
        phone: [
                { required: true, message: "请输入电话号码" },
                { pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: "手机格式不对" }
              ],
        email: [
                { required: true, message: "请输入电子邮箱" },
                { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: "请输入有效的邮箱" }
              ],
         pass: [ { required: true, message: "请输入密码" } ],
      }
  }
}