前端代码编写中常见规范

最新推荐文章于 2024-07-22 12:12:13 发布

Lemoncat233

最新推荐文章于 2024-07-22 12:12:13 发布

阅读量238

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44512488/article/details/115185833

版权

本文主要介绍了前端开发中的一些常见规范，包括表单验证、操作确认、表格设计、命名规范、时间日期格式、组件使用、字体样式、通用规则以及版权注意事项。内容详细涵盖了各个方面的最佳实践，旨在提升代码质量和用户体验。

摘要由CSDN通过智能技术生成

一、表单验证（正则）

email

/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;

手机号验证

/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/

座机验证

/^(0\d{2,3})-?(\d{7,8})$/

身份证号码
1.普通验证

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

2.精准验证
18位

/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

15位

/^[1-9]\d{5}\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/

后6位

 /^(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

姓名
长度验证：2-30个字符
地址
长度验证：5-200个字符
防止重复提交
提交表单时需要使用JS将按钮设置为禁用或者Loading状态，然后再向后台接口提交数据

操作确认

提交删改操作时，先询问确认再提交数据

表格

遇到数量、金额等数值型字段时，一律居右显示（情况不允许或居右不美观与UI沟通）

遇到金额时等字段时，强制保留两位小数点

完成数据变更提交后，务必对表格进行重新加载，且要有加载动画效果

命名规范

1、所有命名必须做到见名知意，能大概知道其含义，作用。严禁无意义命名，命名与实际含义不符

2、常量名所有字母大写，若有多个单词构成，使用 “_” 连接

3、变量名、方法名、对象名采用驼峰命名法，首字母小写

4、CSS命名使用 “-” 减号分割，img使用 “_” 下划线分割，静态文件修改之后，在原文件名之后加下划线 +日期。例：“文件名_20210324”

时间与日期

XX日期：YYYY-MM-DD
XX时间：YYYY-MM-DD HH：mm：ss

组件

VUE框架，所有日历组件都加上快捷选择效果
如近7天、近15天，近30天、本周、上周、本月、上月
此处以elementUI为例
untils.js

  pickerOptions:function(){
   
    return {
   
      shortcuts: [{
   
          text: '近7天',
          onClick(picker) {
   
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
   
          text: '近15天',
          onClick(picker) {
   
            const end = new Date();
            const start = new Date