前端开发中需要注意的细节

前端开发过程中需要注意的细节

1. 输入框通过 *** :maxlength=“200” ***做最大输入字数限制，否则过长调接口时报错（注：后端会限制，否则数据库可能会挂）

<el-row :gutter="20">
   <el-col :span="24" >
         <el-form-item label="备注" class="" prop="remarks">
             <el-input type="textarea" :disabled="disabled" :rows="2" :maxlength="200" v-model="info.remarks"></el-input>
         </el-form-item>
     </el-col>
 </el-row>

2. 数字输入框，通过***:precision=“0”***做精度控制；通过:min和:max限制数字最小值和最大值

 <el-form-item label="团队人数" prop="teamPersonNum">
    <el-input-number controls-position="right" v-model="basicInformation.teamPersonNum" :min="1" :precision="0" :max="10000" class="width100" :disabled="disabled"></el-input-number>
  </el-form-item>

3. 表单进行校验，包括非空校验和合法性校验。尤其身份证号、手机号、邮箱。

   注： 需要注意，增加validator后一定不要忘了校验非空。

<el-form ref="infoForm" :rules="infoRules" :inline="true" :model="info">
	<el-row :gutter="20">
        <el-col :span="12" >
               <el-form-item label="电子邮箱" class="" prop="email">
                   <el-input v-model="info.email" :maxlength="200"></el-input>
               </el-form-item>
           </el-col>
            <el-col :span="12" >
                <el-form-item label="手机" class="" prop="mobile">
                    <el-input v-model="info.mobile" :maxlength="200"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
</el-form>

<script>
import {validEmail, validPhone} from "@/utils/validate";
data () {
    var validatePhoneNum = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入手机号'));
        }else if (value) {
            var errorMsg = validPhone(value);
            if (!errorMsg) {
                callback(new Error('请输入正确的手机号'));
            } else {
                    callback();
            }
        }
    };
    var validateEmail = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入电子邮箱'));
        }else
        if (value) {
            var errorMsg = validEmail(value);
            if (!errorMsg) {
                callback(new Error('请输入正确的电子邮箱'));
            } else {
                    callback();
            }
        }
    };
    return {
    	info: {
            mobile:'',
            email:'',
        },
        infoRules:{
            mobile: [{ required: true, validator: validatePhoneNum, trigger: "blur"}],
            email: [{ required: true, validator: validateEmail, trigger: "blur", }],
        }
    }
 }
</script>




// js文件中的校验方法
邮箱合法性校验
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

手机号合法性校验
export function validPhone(phone) {
  const reg = /^1[3|4|5|7|8|9][0-9]{9}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/
  return reg.test(phone)
}
证件号合法性校验
export function isIdentityId(identityId) {
    //长度或格式校验
    var patrn =
      /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    //地区校验
    var aCity = {
      11: "北京",
      12: "天津",
      13: "河北",
      14: "山西",
      15: "内蒙古",
      21: "辽宁",
      22: "吉林",
      23: "黑龙江",
      31: "上海",
      32: "江苏",
      33: "浙江",
      34: "安徽",
      35: "福建",
      36: "江西",
      37: "山东",
      41: "河南",
      42: "湖北",
      43: "湖南",
      44: "广东",
      45: "广西",
      46: "海南",
      50: "重庆",
      51: "四川",
      52: "贵州",
      53: "云南",
      54: "西藏",
      61: "陕西",
      62: "甘肃",
      63: "青海",
      64: "宁夏",
      65: "新疆",
      71: "台湾",
      81: "香港",
      82: "澳门",
      91: "国外",
    };
    // 出生日期验证
    var sBirthday = (
        identityId.substr(6, 4) +
        "-" +
        Number(identityId.substr(10, 2)) +
        "-" +
        Number(identityId.substr(12, 2))
      ).replace(/-/g, "/"),
      d = new Date(sBirthday);
  
    // 身份证号码校验 最后4位  包括最后一位的数字/字母X
    var sum = 0,
      weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
      codes = "10X98765432";
    for (var i = 0; i < identityId.length - 1; i++) {
      sum += identityId[i] * weights[i];
    }
    var last = codes[sum % 11]; //计算出来的最后一位身份证号码
  
    var errorMsg = "";
    if (identityId === "") {
      errorMsg = "身份证号不能为空";
    } else if (!patrn.exec(identityId)) {
      errorMsg = "你输入的身份证长度或格式错误";
    } else if (!aCity[parseInt(identityId.substr(0, 2))]) {
      errorMsg = "你的身份证地区非法";
    } else if (
      sBirthday !=
      d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
    ) {
      errorMsg = "身份证上的出生日期非法";
    } else if (identityId[identityId.length - 1] != last) {
      errorMsg = "你输入的身份证号非法";
    }
    return errorMsg;
  }

4. 页面自适应，整体页面设置最小宽度
5. 掉接口时超时设置

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API + '/admin-api/', 
  // 超时 单位ms毫秒
  timeout: 3000000,   
})

6. v-if 判断某一属性是否存在，且这个属性是对象或数组下的，则需要先判断对象或数组是否存在，再判断数组/对象下的具体属性

 <div v-if="info && info.id" class="width300"></div>

 data(){
  return {
  	info:{
  		id: '001'
  	}
  }
 }