1.在表格中操作时间，对时间格式转化，2.自定义规则验证身份证号

最新推荐文章于 2023-06-07 21:14:53 发布

常威在打来福~

最新推荐文章于 2023-06-07 21:14:53 发布

阅读量153

点赞数

分类专栏：婉约派

本文链接：https://blog.csdn.net/weixin_41166682/article/details/105498874

版权

婉约派专栏收录该内容

38 篇文章 1 订阅

订阅专栏

1.写个vue过滤器
在templatle中，有个需求就是我要在表中操作，如果操作选择了时间之后，如果不写个过滤器，显示的时间就不对

<el-table
 :data="tableData"
 stripe
 style="width: 100%;"
 @row-click="handleCurrentChange"
 highlight-current-row
 @selection-change="selectChange">
 <el-table-column type="selection" align="center" width="48"></el-table-column>
 <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
 <el-table-column prop="deliveryDate" label="要求到货日期"  width="120" :show-overflow-tooltip="true">
   <template slot-scope="scope">
     <el-date-picker
       v-if="scope.row.isEdit"
       v-model="scope.row.deliveryDate"
       type="date"
       size="small"
       style="width: 100%"
       placeholder=""
       clear-icon
       @focus="threeFocus(scope.$index)"
       @change="dateChange"
     >
     </el-date-picker>
     <span v-else>{{scope.row.deliveryDate | formatDateFilter('yyyy-MM-dd HH:mm:ss') }}</span>
   </template>
 </el-table-column>
 <el-table-column label="操作" width="80">
   <template slot-scope="scope">
     <el-button type="text" @click="deleteTable(scope.row, scope.$index)">删除</el-button>
   </template>
 </el-table-column>
</el-table>

filters中:

formatDateFilter: function (iDate, sFormat = 'yyyy-MM-dd HH:mm:ss') {
   // formatDateFilter('yyyy-MM-dd HH:mm:ss')可以传年月日时分秒，也可以只传年月日('yyyy-MM-dd')
   if (!iDate) { return ''; }
   let dDate = new Date(iDate);
   let year = dDate.getFullYear();// 年
   let month = dDate.getMonth() + 1;// 月
   if (month < 10) { month = '0' + month; }
   let date = dDate.getDate();// 日
   if (date < 10) { date = '0' + date; }
   let hour = dDate.getHours();// 时
   if (hour < 10) { hour = '0' + hour; }
   let minute = dDate.getMinutes();// 分
   if (minute < 10) { minute = '0' + minute; }
   let second = dDate.getSeconds();// 秒
   if (second < 10) { second = '0' + second; }
   let millisecond = dDate.getMilliseconds();// 毫秒
   if (sFormat.indexOf('yyyy') >= 0) { sFormat = sFormat.replace('yyyy', year + ''); }
   if (sFormat.indexOf('MM') >= 0) { sFormat = sFormat.replace('MM', month + ''); }
   if (sFormat.indexOf('dd') >= 0) { sFormat = sFormat.replace('dd', date + ''); }
   if (sFormat.indexOf('HH') >= 0) { sFormat = sFormat.replace('HH', hour + ''); }
   if (sFormat.indexOf('mm') >= 0) { sFormat = sFormat.replace('mm', minute + ''); }
   if (sFormat.indexOf('ss') >= 0) { sFormat = sFormat.replace('ss', second + ''); }
   if (sFormat.indexOf('SSS') >= 0) { sFormat = sFormat.replace('SSS', millisecond + ''); }
   return sFormat;
 }

2.正则表达式验证身份证号码：

判断：如果一个数为空或者不为数字时： if (!formData.age || isNaN(formData.age)) { this.$message.error(‘不能为空，请输入数字’) }

template中

<el-form ref="form" label-width="100px" size="mini" :rules="form" :model="formData">
	<el-col :span="8" class="tb-row">
      <el-form-item label="身份证" prop="driverCardNo">
        <el-input v-model="formData.driverCardNo" clearable></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
     <el-form-item label="姓名" prop="userName">
        <el-input v-model="formData.userName" @focus="inputC.nameFocus = true" @blur="inputC.nameFocus = false" placeholder="请输入" :disabled="operate === 'detail'" size="small"></el-input>
        <span v-if="formItem.userName && charLength(formItem.userName) <= 100 && inputC.nameFocus" class="showLen">
            剩余{{100 - charLength(formItem.userName)}}个字符
        </span>
      </el-form-item>
    </el-col>
</form>

data中

data () {
	var checkCardNo = (rule, value, callback) => {
        if (value) {
          let str = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
          if (!str.test(value)) {
            return callback(new Error('请输入正确的身份证格式'))
          }
          if (value.length !== 18) {
            callback(new Error('请输入18位'));
          }
        }
        callback();
      };
	return {
		formData: {
			driverCardNo: ''
		},
		form: {
		  // 校验
		  driverCardNo: [
            {required: true, message: '不能为空', trigger: 'change'},
            { validator: checkCardNo, trigger: 'change' }
         ],
	    },
	    inputC:{
          nameFocus: false
      }
	}
}

methods中

methods: {
	//判断还剩多少长度
    charLength (val) {
        var len = 0;
            for (var i = 0; i < val.length; i++) {
                 var a = val.charAt(i);
                 if (a.match(/[^\x00-\xff]/ig) != null) 
                {
                    len += 3;
                }
                else
                {
                    len += 1;
                }
            }
        return Number(len);
    }
}