vue+element 表单 身份证号码+手机号+邮箱号的验证并且让输入框只能输入数字并不改变央样式

表单正常的写，验证消息的话 就根据下面的来写 就行了，

<el-form
              ref="ruleForm"
              size="small"
              :rules="rules"
              :model="ruleForm"
              label-width="100px"
            >
			<el-form-item label="身份证号：" prop="id_card">
                    <el-input
                      maxlength="18"
                      v-model="ruleForm.id_card"
                      placeholder="请输入证件号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话：" prop="mobile">
                    <el-input
                      maxlength="11"
                      @input="
                        ruleForm.mobile = ruleForm.mobile.replace(
                          /^(0+)|[^\d]+/g,
                          ''
                        )
                      "
                      v-model="ruleForm.mobile"
                      placeholder="请输入手机号码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="电子邮箱：" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入电子邮箱"
                  ></el-input>
                </el-form-item>
            </el-form>

 rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          // 这个只能验证手机号
          // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
          { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
        ],
        id_card: [
         { required: true, message: "请输入身份证号", trigger: "blur" },
          { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}
        ],
          email: [
         { required: true, message: "请输入邮箱", trigger: "blur" },
          { pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur"}
        ],
      }
    };
  },

手机号部分 @input 这一块是让这个输入框只能输入数字，按照element的type来设置的话样式不太好，所以这样写的话比较好点。