Vue rules校验

vue中的表单校验

Vue中使用了表单的自定义校验，今天进行总结：
Vue中常规校验：
使用案例

rules: {
   parkName: [
     { required: true, message: "园区名称不能为空", trigger: "blur" },
     { min: 2, max: 30, message: "计划名称只允许存在2-30个字符以内", trigger: "blur" },
     { pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,message: "请输入正确的申请人电话"}
   ]
}

#二、常用规则

1、是否合法IP地址:
pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
2、是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
3、 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
4、是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
5、整数填写
pattern:/^-?[1-9]\d*$/
6、正整数填写
pattern:/^[1-9]\d*$/
7、小写字母
pattern:/^[a-z]+$/
8、大写字母
pattern:/^[A-Z]+$/
9、大小写混合
pattern:/^[A-Za-z]+$/
10、数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/
11、前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/
12、密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
13、中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/
14、1-100的数字
pattern: /^([1-9][0-9]{0,1}|100)$/

#自定义规则

<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>