日常问题集锦_el-input 居中-程序员宅基地

/**  获取当前时间  数值为个位数时补0 */
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1 : nowDate.getMonth() + 1;
var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
var nowTime = year + "-" + month + "-" + day;//控制台输出为：2022-08-15

// 获取当前时间精确至[年、月、日、时、分、秒]
let nTime = new Date();
let nYear = nTime.getFullYear();
let nMonth = nTime.getMonth() + 1;
let nDay = nTime.getDate();
let nHour = nTime.getHours();
let nMin = nTime.getMinutes();
let nSecond = nTime.getSeconds();

//getDay()方法就是获得这一天的星期码(int类型的),从星期一到星期日的星期码是1,2,3,4,5,6,0。
let nday = nTime.getDay();

【③】一些常用的校验规则：

提前须知：trigger如何选择：trigger:‘blur’ OR trigger:‘change’ OR 不设置？

对el-input输入框的验证，trigger的值选blur，即失去焦点时进行验证。
下拉框（el-select）、日期选择器（el-date-picker）、复选框（el-checkbox）、单选框（el-radio）验证时，trigger的值选择change，即当值发生变化时就进行验证。

【校验规则的使用方式】：

第一种方式：引入外部资源，然后校验中调用

/** 对身份证号的格式进行验证 */
import {validateSfz} from '../../../utils/validatesfz';
export default {
    name: "applyInfo", 
    data() {
        return {
            rules: {
                idCard: [{required: true, validator: validateSfz, trigger: "blur" }]
            }
        };
    }, 
    created() {}, 
    methods: {} 
};

第二种方式：内部声明方法，然后校验中调用

/** 校验输入的值只能是数字（整数和小数都可以  不能带+-号） */
export function validateNumber(rule, value,callback) {
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    const reg = /^\d+$|^\d+[.]?\d+$/;
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入数字格式的数据'));
    } else {
      callback();
    }
  }
}
export default {
    name: "applyInfo", 
    data() {
        return {
            rules: {
                price: [{required: true, validator: validateNumber, trigger: "blur" }]
            }
        };
    }, 
    created() {}, 
    methods: {} 
};

第三种方式：在参数中声明验证方法，在校验中调用

/** vue中 使用表单校验密码输入是否一致 */
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
        email: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        email: [
          { type: "email",message: "请输入正确的邮箱地址",trigger: ["blur", "change"]}
        ]
      }
    };
  },
  methods: {}
};

【IP地址的校验规则】

let regexp = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;

let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;

let regexp = /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/;

【手机号码的校验规则】

const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
const reg = /^[1][3-9][0-9]{9}$/;

【固话的校验规则】

const reg = /^0\d{2,3}-?\d{7,8}$/;

【身份证号码的校验规则】

const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

【邮箱的校验规则】

const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;

【密码的校验规则】

const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/;

（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）

【中文的校验规则】

const reg = /^[\u0391-\uFFE5A-Za-z]+$/;

【纯数字或者小数的校验规则】

const reg = /^\d+$|^\d+[.]?\d+$/;（不能带+-号可以以0开头）

const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/;（可以带+-号除非本就0，否则不能以0开头）

Js 正则表达式特殊字符含义：

字符   匹配
\o     null
\t      制表符
\n     换行符
\v     垂直制表符
\f     换页符
\r     回车符
\xnn   由十六进制nn指定的拉丁字符 如\xoA等价于\n
\uxxx  有十六进制数xxxx指定的Unicode字符，如\u00009等价于\t
\cX    控制字符^X,如\cJ等价于\n
[…]    方括号内的任意字符
[^…]   不在方括号内的任意字符
.      除换行符和其他Unicode行终止符之外的任意字符
\w     任何ASCII字符组成的单词 等价于[a-zA-Z0-9]
\W     任何非ASCII字符组成的单词 等价于[^a-zA-Z0-9]
\s     任何Unicode空白符
\S     任何非Unicode空白符
\d     任何ASCII数字 等价于[0-9]
\D     除了ASCII数字之外的任何字符 等价于[^0-9]
{n,m}  匹配前一项至少n次，但不能超过m次
{n, }  匹配前一项n次或更多次
{n }   匹配前一项n次
?      匹配前一项0次或1次 等价于{0,1}
+      匹配前一项1次或多次 等价于{1,}
*      匹配前一项0次或多次 等价于{0,}
|      选择，匹配的是该符号左边的子表达式或右边的子表达式
(…)    组合，将几个项组合为一个单元，这个单元可通过*,+,?,|等符号加以修饰，而且可以记住和这个组合相匹配的字符串以供此后的引用使用
(?:…)  只组合，把项组合到一个单元，但不记忆与该组相匹配的字符
\n     和第n个分组第一次匹配的字符相匹配，组是圆括号中的子表达式（也有可能是嵌套的）,组索引是从左到右的左括号数，(?:形式的分组不编码
^      匹配字符串的开头，在多行检索中，匹配一行的开头
$      匹配字符串的结尾，在多行检索中，匹配一行的结尾
\b     匹配一个单词的边界，简言之，就是位于字符\w和\W之间的位置，或位于字符\w和字符串的开头或结尾之间的位置（注意：[\b]匹配的是退格符）
\B     匹配一个非单词的边界的位置
(?=p)  零宽正向先行断言，要求接下来的字符都与p匹配，但不能包括匹配p的那些字符
(?!p)  零宽正向先行断言，要求接下来的字符都与不p匹配

用于模式匹配的string方法：

Search(regx):返回第一个与之匹配的子串的起始位置，如果找不到匹配的子串，返回-1
Replace(regx,replacestr):检索和替换
Match(regx):返回的是一个有匹配结果组成的数组
Split(regx)：返回的是分割后的数组

Validate默认的常用校验：

拓展应用：根据身份证号获取年龄和性别

/** 根据身份证号获取年龄 */
function getIdCardByAge(idCard) {
	var pat = /^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9]|x|X))|(\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}))$/;
	if(!pat.test(idCard)){
		$('#age').val('');
		$('#sex').val(0);
		$.modal.alert("请输入正确的身份证号！", "warning");
		return null;
	}
	if (idCard != null && idCard != '') {
		//获取年龄
		var myDate = new Date();
		var month = myDate.getMonth() + 1;
		var day = myDate.getDate();
		var age = myDate.getFullYear() - idCard.substring(6, 10) - 1;
		if (idCard.substring(10, 12) < month || idCard.substring(10, 12) == month && idCard.substring(12, 14) <= day) {
			age++;
		}
		if(age <= 0){
			age = 1;
		}
		$('#age').val(age);
		var gender = idCard.slice(14, 17) % 2 ? "0" : "1"; // 1代表男性，2代表女性'
		$('#sex').val(gender);
	}
}

输入框中只能输入数字或者小数点

<!-- 第一种：在输入框中输入值后直接清除“数字”和“.”以外的字符 -->
<el-form-item label="金　　额" prop="price">
  <el-input v-model="form.price" @change="updatePrice" placeholder="请输入金额">
     <template slot="append">元</template>
  </el-input>
</el-form-item>
export default {
  data() {
    return {
         // 表单参数
        form: {
            price: null
        }
    };
  },
  methods: {
    updatePrice(){
      this.form.price = this.form.price.replace(/[^\d\.]/g, ''); //清除“数字”和“.”以外的字符
    },
  }
};

<!-- 第二种：在表单校验中添加数字校验，非数字的给出错误提示 -->
<el-form :inline="true" :model="form" :rules="rules" class="demo-form-inline">
  <el-form-item label="金　　额" prop="price">
      <el-input v-model="form.price" placeholder="请输入金额">
         <template slot="append">元</template>
      </el-input>
    </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
           price: null
        },
      // 表单校验
      rules: {
        price: [{pattern: /^(0|([1-9]\d*))(\.\d+)?$/, message: "请输入数字格式的数据",       trigger: "blur"}]
      }
    },
    methods: {}
  }
</script>

【④】vue 表格中数据默认全部选中：

//一般放在watch下，监听列表数据变动，永远默认全部行都选中

watch:{

   'XXXList':function(val){

       //列表默认全选

       this.$nextTick(() => {

           val.forEach(row => {

               this.$refs.XXXTable.toggleRowSelection(row, true);

           });

       });

    }

}

【⑤】vue 获取表格中选中行的数据：

const data = this.$refs.XXXTable.selection;

console.log("选中了【"+data.length+"】条数据");

console.log("选中的数据为："+JSON.stringify(data));

【⑥】vue 强制更新数据：

使用Vue开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，执行下面这个方法，强制刷新数据：this.$forceUpdate()
eg：itemTypeChange(data){
             this.$forceUpdate();
let obj = {};
obj = this.itemTypeOptions.find((item)=>{
                    return item.id === data;
});
             this.form.itemType=obj.typeName;
       }

【⑦】vue 想要el-input框内文字居中显示：

<style lang="scss">
  // #XXX 是为想要设置文本框内容居中的区域设置的id
  // 即在 id="orderGroupForm" 区域内使用el-input是且size=small的文本框中内容居中
  #orderGroupForm .el-input--small .el-input__inner {
    text-align: center;
  }
</style>

【⑧】vue 清除表单内的内容或者清除表单验证：

变为

this.$refs['form'].clearValidate();//只清除表单验证消息，不清除表单内容
this.$refs['form'].resetFields();//清除表单内容和清除表单验证消息
//清除表单验证消息不起作用时，可尝试
setTimeout(() => {
   this.$refs["form"].clearValidate();// 定时器执行
}, 30);
或者
this.$nextTick(function () {
   this.$refs['form'].clearValidate();// 延时执行
})

【⑨】vue 表格分页的两种格式：

 <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize" @pagination="getList"/>

 <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, prev, pager, next"/>

【⑩】vue 中防止按钮重复点击提交的方法：

参考博文：（我常用的是第三个动态控制 disabled 属性的方式）Vue中防止按钮重复点击提交的方法_别拿曾经看以后~的博客-程序员宅基地_vue 防止重复提交https://blog.csdn.net/weixin_42342065/article/details/125504552?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E9%98%B2%E6%AD%A2%E9%87%8D%E5%A4%8D%E6%8F%90%E4%BA%A4&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-125504552.nonecase&spm=1018.2226.3001.4187

【十一】$modal.confirm中this不起作用问题：

this.$modal.confirm('是否确认登记？').then(function (){
  updatePerson(this.form).then(response => {
    this.$modal.msgSuccess("确认登记成功");
    this.XXXList();
  });
}).catch(() => {});
上面这种方式，使用时会发现方法执行完后，该有的弹窗提示和刷新表格没起作用，即通过this调用的方法，都失效了，将 function (){} 变为 () => {}，即可解决这个问题：
this.$modal.confirm('是否确认登记？').then(() => {
  updatePerson(this.form).then(response => {
    this.$modal.msgSuccess("确认登记成功");
    this.XXXList();
  });
}).catch(() => {});

【十二】：vue 当鼠标移入时改变单元格内字体颜色

/* 当单元格hover进入时，字体颜色改变 */

#XXXTable .el-table__body tr:hover > td{

color: black !important;
}

【十三】：vue 只能选择当天往前or往后的数据

<el-form :inline="true" :model="form" :rules="rules" class="demo-form-inline">
  <el-form-item label="开始时间" prop="startTime">
    <el-date-picker v-model="form.startTime" type="date" value-format="yyyy-MM-dd"
         :picker-options="pickerBeginDateBefore" clearable placeholder="请选择开始时间"/>
  </el-form-item>
  <el-form-item label="结束时间" prop="endTime">
    <el-date-picker v-model="form.endTime" type="date" value-format="yyyy-MM-dd"
         :picker-options="pickerAfterDateBefore" clearable placeholder="请选择结束时间"/>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        pickerBeginDateBefore: {
           disabledDate(time) {
             return time.getTime() > Date.now();//只能选择今天以及今天之前的时间
           }
        },
        pickerAfterDateBefore: {
           disabledDate(time) {
             return time.getTime() < Date.now()- 8.64e7;//只能选择今天以及今天之后的时间
           }
        },
        form: {
           startTime: null,
           endTime: null
        },
        // 表单校验
        rules: {
           startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
           endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }]
        }
    },
    methods: {}
  }
</script>

本文链接：https://blog.csdn.net/Aku_2020/article/details/127860131

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java调用视图如何传参_java – 在使用具有不同片段/布局的视图寻呼机时如何传递片段参数？...-程序员宅基地

文章浏览阅读67次。目标：使用片段参数将字符串值从TextView传递到新片段TextView,但在FragmentPagerAdapter中使用具有不同布局/片段的ViewPager时.问题：新片段永远不会从前一个片段接收片段参数.我的设置：我的Activity托管了ViewPager和FragmentPagerAdapter.我重写了FragmentPagerAdapters getItem(int positi..._java访问视图传参

Android file类使用详解-SDcard_sdcard_print_file-程序员宅基地

文章浏览阅读1w次，点赞4次，收藏12次。Android file类使用详解-SDcard_sdcard_print_file

CMake中添加Qt模块的合理方法_cmake测试代码中能定义qt类吗-程序员宅基地

文章浏览阅读1.2w次，点赞7次，收藏63次。用CMake来组织的工程中要用Qt首先要设置、找到Qt相关模块。主要是通过find_package这个CMake命令。但网上很多教程都过时了，或者不够清晰灵活。因为这部分很常用，所以特别用一篇文章把我们目前在生产环境中使用的方法给大家介绍下。设置Qt库路径Qt版本很多，我们的开发机上一般也装有多个不同版本的Qt。个人尝试性的项目一般用最新版的Qt，而真正发布的产品一般用的是LTS版本Qt（LTS：Long Term Support，长期支持版本，目前最新的LTS是5.9）。我们的方法是在系统中添_cmake测试代码中能定义qt类吗

在Linux系统编译DCMTK的源码得到其动态库文件和可执行程序_dicom动态库-程序员宅基地

文章浏览阅读2.2k次，点赞4次，收藏5次。Linux环境编译DCMTK源码，生成动态库文件和可执行文件_dicom动态库

详述 MySQL 导出数据遇到 secure-file-priv 的问题_mysql 导出select 数据 --secure-file-priv-程序员宅基地

文章浏览阅读416次。ERROR 1290 (HY000): The MySQL server is running with the –secure-file-priv option so it cannot execute this statement.对于上述错误，相信对于第一次执行 MySQL 数据导出操作的同学大都会遇见。至于为什么会遇到这个错误，原因很简单，那就是：我们不知道 MySQL 默认的_mysql 导出select 数据 --secure-file-priv

P1433 吃奶酪 —(状压DP)_p1433状态dp-程序员宅基地

文章浏览阅读854次，点赞20次，收藏17次。状态压缩动态规划，就是我们俗称的状压DP，是利用计算机二进制的性质来描述状态的一种DP方式。一只小老鼠要把它们都吃掉，问至少要跑多少距离？输出一行一个实数，表示要跑的最少距离，保留。第一行有一个整数，表示奶酪的数量。行，每行两个实数，第。对于全部的测试点，保证。，两点之间的距离公式为。_p1433状态dp