el-input验证手机号

html

<el-form ref="Form" :rules="rules" :model="edit" label-width="100px">
	<el-form-item label="联系方式" prop="phone">
	  <el-input v-model="edit.phone"></el-input>
	</el-form-item>
</rl-form>

js

  edit: {
    phone: ""
  },
  rules: {
    phone: [
      { required: true, message: "请输入联系方式", trigger: "blur" },
      { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
      {
        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
        //pattern: /^1[3456789]\d{9}$/,
        message: "请输入正确的手机号码",
      },
    ],
    id_number: [
      {
        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        message: "请输入正确的身份证号码",
      },
    ],
  },

展示页面