前端Vue中常用rules校验规则

正则表达式 整数

^[1-9]\d*$　 　 //匹配正整数
^-[1-9]\d*$ 　 //匹配负整数
^-?[1-9]\d*$　　 //匹配整数
^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）

 

rules: {
    //验证非空和长度
    name: [{
        required: true,
        message: "站点名称不能为空",
        trigger: "blur"
        },{
        min: 3,
        max: 5,
        message: '长度在 3 到 5 个字符',
        trigger: 'blur'
    }],
    //验证数值
    age: [{
        type: 'number',
        message: '年龄必须为数字值',
        trigger: "blur"
    }],
    //验证日期
    birthday:[{
        type: 'date',
        required: true,
        message: '请选择日期',
        trigger: 'change'
    }],
    //验证多选
    habit: [{
        type: 'array',
        required: true,
        message: '请至少选择一个爱好',
        trigger: 'change'
    }],
    //验证邮箱
    email: [{
        type: 'email',
        message: '请输入正确的邮箱地址',
        trigger: ['blur', 'change']
    }],
    // 验证手机号
    telephone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        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"
    }]          
}

vue的rules中自定义校验规则

 <script>
  import { checkParam } from "@/api/system/param.js";

  export default {
    name: "Param",
    data() {
      var validateCode = (rule, value, callback) => {
        if (value === '') {} else {
          if (value !== '') {
            const param = {
              id: this.form.id,
              code: this.form.code
            }
            checkParam(param).then(response => {
              if (!response.data) {
                callback(new Error(response.msg));
              } else {
                callback();
              }
            });
          }
        }
      };
      return {
        // 表单校验
        rules: {
          code: [{
            required: true,
            message: "参数编码不能为空",
            trigger: "blur"
          }, {
            max: 50,
            message: '参数编码在 50 个字以内',
            trigger: 'blur'
          }, {
            validator: validateCode,
            trigger: 'blur'
          }]
        }
      };
    },
    created() {

    },
    methods: {

    }
  };
</script>