一、自带的数据校验

rules: {
    //验证非空和长度
    one: [
    	{required: true, message: "站点名称不能为空", trigger: "blur"},
        {min: 3, max: 5,  message: '长度在 3 到 5 个字符',trigger: 'blur' }
    ],
    //验证数值
    two: [
    { type: 'number', message: '请输入数字类型',trigger: "blur"}
    ],
    //验证日期
    three:[
    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
    ],
    //验证多选
    four: [
    { type: 'array', required: true, message: '请选择一个', trigger: 'change' }
    ],
    //验证邮箱
    five: [
    { type: 'email',  message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    // 验证手机号
    telephone: [
    {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
     message: "请输入正确的手机号码",
     trigger: "blur"}
    ],
     // 验证身份证号
    telephone: [
    {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
     message: "请输入正确的身份证号",
     trigger: "blur"}
    ],
    // 验证经度 整数部分为0-180小数部分为0到7位
    longitude: [
    {pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
     message: "整数部分为0-180,小数部分为0到7位",
     trigger: "blur"}
    ],
    // 验证维度 整数部分为0-90小数部分为0到7位
    latitude: [
    {pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
     message: "整数部分为0-90,小数部分为0到7位",
     trigger: "blur"}
    ]          
}

二、常用自定义的校验规则

const validateValidity = (rule, value, callback) =>{
  if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
    callback(new Error('最多只能输入两位小数'));
  }else{
    callback();
  }
};
export function checkMinVal(rule, value,callback) {
  if(value <0) {
    callback(new Error('请输入正整数'));
  } else {
    callback();
  }
}
export function checkMaxVal(rule, value,callback) {
  if(value >= 2147483647) {
    callback(new Error('输入的数字过大'));
  } else {
    callback();
  }
}

//将数据的数据调用controller验证是否存在
export function checkDay(rule, value, callback) {
  selectDay(value).then(response => {
    const code = response.data.code;
    console.log(code);
    if (code == 500) {//数据已存在
      callback(new Error('该数据已存在'));
    } else {
      callback();
    }
  })
}

三、rule中的引用

rules: {
		idCard: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的身份证号",
            trigger: "blur"
          }
        ],
        day: [
          { required: true, message: "数据不能为空", trigger: "blur" },
          {validator: checkMinVal, trigger: 'blur' },
          {validator: checkMaxVal, trigger: 'blur' },
          {validator: checkDay, trigger: 'blur' },
        ],
        integral: [
          {validator: checkMinVal, trigger: 'blur' },
          {validator: checkMaxVal, trigger: 'blur' },
        ]
  }
Logo

前往低代码交流专区

更多推荐