【无标题】

Vue

一、常见的 form 表单校验

1.添加form表单校验

// 在form表单中添加如下语句 并给表单起名为ruleForm
:rules="rules" ref="ruleForm"

2.基础校验

// 1.必填校验
{ required: true, message: '请输入活动名称', trigger: 'blur' },
 
// 2.长度校验
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
 
// 3.选择select校验
{ required: true, message: '请选择活动区域', trigger: 'change' }
 
// 4.手机号校验
{
   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
   message: "请输入正确的电话",
   trigger: "blur",
},
 
// 5.邮箱校验
{  type: "email",  message: "请输入正确的邮箱",  trigger: "blur"  }

3.密码校验

密码一般需要符合一定的要求，并且需要校验两次输入密码相同

pwdRules: {
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkData, trigger: "blur" },
          {
            min: 8,
            max: 20,
            message: "长度在8到20个字符",
            trigger: "blur",
          },
          {
            required: true,
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$/,
            message: "包含大小写字母、数字和特殊字符的三种",
            trigger: "blur",
          },
        ],
        pwd1: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      }

// 两次密码相同校验
var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pwdForm.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
 
// 不能输入汉字校验
var checkData = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("密码不能输入汉字!"));
        } else {
          callback();
        }
      }
      callback();
    }

如果需要修改，直接修改pattern中的正则表达式就可以了

二、异步调接口校验手机号唯一性

由于项目设置手机号登录，因此需要判断新建账号的手机号唯一。后端可以在添加时报错提示，但是用户友好的方式就是在注册时直接显示’手机号已经被注册‘。

1.【前端】添加校验方式checkTelCode

phonenumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: checkTelCode, trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的电话",
            trigger: "blur",
          },
        ],

data(){
    const checkTelCode = async (rule, value, callback) => {
      if (value) {
        await validPhoneUnique({ phonenumber: value }).then((response) => {
          if (response.code == 200) {
            callback();
          } else {
            callback(new Error("手机号已存在"));
          }
        });
      }
    };
    return {....}
}

2.【接口】调接口异步校验

// 验证手机号唯一
export function validPhoneUnique(phonenumber) {
  return request({
    url: "/execute/info/validPhoneUnique",
    method: "get",
    params: phonenumber
  });
}

三、el-table 将某一列相同的数据进行跨行合并

注意：
1、el-table中 写上： :span-method=“objectSpanMethod”
2、两个方法不用改动
3、想合并哪列，在data中columnArr数组里填上列名。
4、可能会有bug具体看生成结果

<template>
  <div>
    <el-table :data="tableData"
    	style="width: 100%" 
   	 	:cell-style="{ 'text-align': 'center' }" 
    	:header-cell-style="{
        	'text-align': 'center',
        	background: '#f6f8fa',
        	color: '#333',
      	}"
     	 border
      	show-summary
     	 :span-method="objectSpanMethod"
    >
      <el-table-column label="行号" type="index" width="60" />
      <el-table-column prop="dotime" label="日期" min-width="110" />
      <el-table-column prop="company_name" label="客户名称" min-width="160" />
      <el-table-column prop="title" label="跟进标题" min-width="130" />
      <el-table-column prop="income" label="收入" min-width="100" />
      <el-table-column prop="cost" label="支出" min-width="100" />
      <el-table-column prop="user_name" label="经办人" min-width="110" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: "index",
  props: {},
  data() {
    return {
      tableData: [], //主数据
      //合并表格
      columnArr: ["", "dotime", "company_name"],
      spanArr: [], //临时组
      spanData: [], // 组合的合并组
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取代理记账的业务
    getList() {
      this.$api.post('/xxx/xxx', {})
        .then((res) => {
          this.tableData = res.data;
          this.getSpanData(this.tableData); //计算需合并的内容
        });
    },

    // 计算需要合并的单元格
    getSpanData(data) {
      this.spanData = [];
      this.columnArr.forEach((element) => {
        let contactDot = 0;
        this.spanArr = [];
        data.forEach((item, index) => {
          if (index === 0) {
            this.spanArr.push(1);
          } else {
            if (item[element] === data[index - 1][element]) {
              this.spanArr[contactDot] += 1;
              this.spanArr.push(0);
            } else {
              contactDot = index;
              this.spanArr.push(1);
            }
          }
        });
        this.spanData.push(this.spanArr);
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.columnArr.includes(column.property)) {
        if (this.spanData[columnIndex][rowIndex]) {
          return {
            rowspan: this.spanData[columnIndex][rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
// scss
</style>