vue+elementui 自定义常用校验规则

vue+elementui 自定义常用校验规则

暂时先发四种,业务亲测有效,会更新的

  • 邮箱校验
var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }
  • 身份证最后一位和个数校验

     var checkCard = (rule, value, callback) => {
            const cardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X)$)/
            if (!value) {
              return callback(new Error('身份证号码不能为空'))
            }
            setTimeout(() => {
              if (cardReg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的身份证号码'))
              }
            }, 100)
          }
    
  • 手机号码校验

    var checkPhone = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入手机号码'));
            } else {
              const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
              // console.log(reg.test(value));
              if (reg.test(value)) {
                callback();
              } else {
                return callback(new Error('请输入正确的手机号码'));
              }
            }
          };
    
  • 强密码校验

     var validateNewPwd = (rule, value, callback) => {
            if (value === null || value === '') {
              callback(new Error('请输入新密码'));
              return
            }
            if (value.length < 6) {
              callback(new Error('新密码长度过短'));
              return
            }
            var reg = new RegExp("^[0-9]*$");
            if (reg.test(value)) {
              callback(new Error('新密码不能为纯数字'));
              return
            }
            reg = new RegExp("^[a-z]*$");
            if (reg.test(value)) {
              callback(new Error('新密码不能为纯小写字母'));
              return
            }
            reg = new RegExp("^[A-Z]*$");
            if (reg.test(value)) {
              callback(new Error('新密码不能为纯大写字母'));
              return
            }
            callback();
          };
    
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个功能可以分为两部分,一是前端页面实现上传功能并选择头像,二是后端接收图片并保存,提供给前端展示。 前端页面实现上传功能: 1. 首先需要引入elementUI的Upload组件,可以在main.js中全局引入。 ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ render: h => h(App), }).$mount('#app') ``` 2. 在Vue组件中使用Upload组件。 ``` <template> <div> <el-upload action="/api/upload" :show-file-list="false" :on-success="handleUploadSuccess" :before-upload="beforeUpload" class="avatar-uploader"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> <script> export default { data() { return { imageUrl: '' } }, methods: { handleUploadSuccess(response) { this.imageUrl = response.data.url }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg' const isPNG = file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG && !isPNG) { this.$message.error('上传头像图片只能是 JPG 或 PNG 格式') return false } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB') return false } return true } } } </script> <style> .avatar-uploader { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 1px dashed #ccc; border-radius: 50%; overflow: hidden; cursor: pointer; } .avatar-uploader-icon { font-size: 24px; } .avatar { width: 100%; height: 100%; object-fit: cover; } </style> ``` 其中,action属性指定了上传图片的地址,这里是/api/upload;show-file-list属性设置为false,表示上传完成后不显示文件列表;before-upload方法用于对上传的图片进行校验,例如格式和大小,如果校验不通过则不会上传;handleUploadSuccess方法用于处理上传成功后返回的数据,这里将返回的图片URL保存在imageUrl中,然后在页面上展示。 后端接收图片并保存: 1. 在Spring Boot项目中添加文件上传配置,在application.properties中添加如下配置: ``` spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=2KB spring.servlet.multipart.max-file-size=10MB spring.servlet.multipart.max-request-size=100MB ``` 其中,file-size-threshold属性表示文件大小阈值,小于此值的文件将存储在内存中,大于此值的文件将存储在磁盘上;max-file-size属性表示最大文件大小,超过此大小的文件将被拒绝;max-request-size属性表示最大请求大小,即上传文件的总大小不能超过此值。 2. 创建一个Controller类用于处理上传请求,例如: ``` @RestController @RequestMapping("/api") public class UploadController { @Autowired private Environment env; @PostMapping("/upload") public Result upload(MultipartFile file) { if (file.isEmpty()) { return Result.error("上传文件不能为空"); } try { String fileName = file.getOriginalFilename(); String suffix = fileName.substring(fileName.lastIndexOf(".") + 1); if (!Arrays.asList("jpg", "jpeg", "png").contains(suffix.toLowerCase())) { return Result.error("上传文件格式不正确"); } String filePath = env.getProperty("upload.path"); File dest = new File(filePath + fileName); file.transferTo(dest); return Result.success("上传成功", "/upload/" + fileName); } catch (IOException e) { e.printStackTrace(); return Result.error("上传失败"); } } } ``` 其中,@PostMapping注解指定了请求方法为POST,请求路径为/api/upload;upload方法接收一个MultipartFile类型的文件参数,用于接收上传的文件;首先校验文件是否为空,然后获取文件名和后缀,校验文件格式是否正确,最后将文件保存到指定的目录中,返回上传成功后的文件URL。 3. 在配置文件中添加上传文件存储路径配置: ``` upload.path=/path/to/upload/folder/ ``` 其中,/path/to/upload/folder/为自定义的上传文件存储路径。 4. 启动Spring Boot项目,访问前端页面,选择图片上传后,可以看到图片成功显示在页面上,并且在上传文件存储路径中生成了对应的文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值