vue element-ui 常用的表单验证

一、比较常用的输入时的校验

①手机号校验

写入校验规则里面即可

 phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          // 这个只能验证手机号
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],

②发布版本的校验

写入校验规则里面即可

 miniVersion: [
          { required: true, message: "请输入最低支持版本", trigger: "blur" },
          {
            pattern: /^\d+\.\d+\.\d+$/,
            message: "请输入xx.xx.xx格式",
            trigger: "blur",
          },
        ],

③

<1>@input校验只能输入数字

 handleEdit(e) {
      let value = e.replace(/^(0+)|[^\d]+/g, ""); // 以0开头或者输入非数字，会被替换成空
      value = value.replace(/(\d{15})\d*/, "$1"); // 最多保留15位整数
      this.community.population = value!='' ? value : 0;
    },

<2>不能输入文字

 <el-input
              v-model="formInlines.code"
              placeholder="请输入code"
              style="width: 9vw"
              maxlength="8"
              show-word-limit
              onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"
            />

二、validator 校验（单独校验）

//首先在data里面定义 
 data() {
    // 省
    let validateMobile1 = (rule, value, callback) => {
      if (value != "") {
        callback();
      } else {
        callback(new Error("请选择省"));
      }
    };
    // 市
    let validateMobile2 = (rule, value, callback) => {
      if (value != "") {
        callback();
      } else {
        callback(new Error("请选择市"));
      }
    };
   return{
       //在里面定义引用
        // 规则
      rules: {
        provinceId: [
          { required: true, validator: validateMobile1, trigger: "change" },
        ],
        cityId: [
          { required: true, validator: validateMobile2, trigger: "change" },
        ],
        }
   } 
   },

如有其他校验会持续更新