科院前台项目总结

最近在写数学学院的项目，记录一下我项目中遇到的问题和总结

一、前台（移动端，vue3）

1. 给表单中的其中一项添加多条校验规则

要求：

1. 给综测成绩添加多条校验规则
2. 只能输入数字，并且“只能输入数字”要在输入框输入内容改变和失去焦点时都触发

<van-form label-align="top" ref="userInfoForm">
	<van-field label="综测成绩" placeholder="请输入综测成绩" v-model.trim="leagueInfo.comprehensive_score" :rules="userInfoRules.comprehensive_score" required autocomplete="off"/>
</van-form>

// 表单校验规则
const userInfoRules = {
  comprehensive_score: [
    {required: true, message: '综测成绩不能为空'},
    {required: true, pattern: /^(?:\d+|\d+\.\d*)$/, message: '只能输入大于等于0的数字', trigger: ['onBlur', 'onChange']}
  ]
}

2. 修改nav-bar样式

  .van-nav-bar { // 修改背景颜色
    background: #ffffff;
  }

  ::v-deep .van-nav-bar__title { // 修改“标题”的样式
    color: #ffffff;
    font-weight: normal;
  }

  ::v-deep .van-nav-bar__text { // 修改“返回”的样式
    color: #ffffff;
  }

  ::v-deep .van-nav-bar__arrow { // 修改“<”的样式
    color: #ffffff;
  }

  .van-hairline--bottom:after {
    border-bottom-width: 0; // 去掉nav-bar底部的横线
  }

3. 修改输入框van-field下面横线的颜色

/deep/ .van-cell:after {
  border-bottom: 1px solid #d5d3d3;
}

4. van-loader表单校验

<van-form label-align="top" ref="attachFormRef">
  <van-field name="uploader" label="附件一：申请书" required :rules="attachRule.applicationRule">
    <template #input>
      <van-uploader v-model="attachInfo.applicationList" />
    </template>
  </van-field>
</van-form>

// js
// 校验规则
const attachRule = {
  applicationRule: [{required: true, message: '附件内容不能为空'}],
}