Element-UI

Element-ui官方文档

表单

vue如何使用rules对表单字段进行校验

表单验证

下面我们看一下官网上的例子，form表单需要绑定rules对象，然后其中的每一项验证规则都对应rules里面的每一条规则。
prop字段为校验的字段,对应的是rules对象里面的值

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
             //required =>表示该字段必填，而且前面会出现*
             //trigger=>blur:失去焦点触发；change：数据改变
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],      
       }
    },
  }
 }
</script>

获取验证结果

上面的例子

   this.$refs.ruleForm.validate((res) => {
     //如果都为true,会返回res为true,否则为false
  }

自定义验证

我们多了一个 validator字段，接受一个回调函数

 data() {
    //我们可以写在这个位置
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },

直接用pattern进行匹配验证:

name: [ { pattern: pattern验证, required: true, message: "提示信息", trigger: "blur" }]

前端Vue中常用rules校验规则:

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.多个8位数字格式(yyyyMMdd)并以逗号隔开

pattern:/^\d{8}(\,\d{8})*$/,

11.数字加英文，不包含特殊字符

pattern:/^[a-zA-Z0-9]+$/,

12.前两位是数字后一位是英文

pattern:/^\d{2}[a-zA-Z]+$/,

13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）

pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

14.中文校验

pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

15.年龄校验
限制1-120之间

pattern:/^(?:[1-9][0-9]?|1[01][0-9]|120)$/

vue验证器vue-validator
vue-validator官网

Vee Validata官网

Table表格

插入图片，使用插槽

官网上说明

row:是插槽子组件返回来的循环中的每一项
例如

   <el-table-column prop="logoUrl" label="品牌LOGO" width="width">
        <template v-slot=" { row, $index }">
          <img :src="row.logoUrl" alt="" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>

Popconfirm 气泡确认框

遇见的问题

Popconfirm在table中使用失效的问题

一般是缺乏唯一标识 => ref ,绑定唯一标识就可以了