目录
【十一】$modal.confirm中this不起作用问题:
【①】运行项目时出现的端口被占用问题:
解决方法:【Windows+R】打开命令提示符,查看被占用端口对应的PID:
netstat -aon|findstr "8080" (8080 表示进行查找的端口号)
点击回车,然后继续输入:
tasklist|findstr "19548" (19548 表示根据端口号查找出来的PID)
即可查看到该端口号被什么程序给占用,如图所示“8080”端口号是被java.exe所占用,最后打开任务管理器,切换到详细信息列表,在PID一列查看“19548”对应的程序,可以右击选项结束任务或进行其他操作,点击结束任务即可释放该端口。
【②】JS中获取当前时间:
/** 获取当前时间 数值为个位数时补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 中防止按钮重复点击提交的方法:
【十一】$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>