表单校验
- 一、正则的方法
- 1. reg.test(str) 判断字符串是否符合规则
- 2. str.match(reg) 用正则提取字符串中的有用信息
- 3. str.replace(reg, '*') 正则替换
- 实例
- 1.用户名:首位必须是字母,只能输入数字字母下划线,允许5-20字节
- 2.工号:只能输入10个数字(长度必须是10位)
- 3.角色名称:2-20个中文
- 4.指导价格:大于0的数字或小数(小数最多2位)
- 5.保留两位小数
- 6.oninput事件控制input无法输入数字和字母以外的字符(只能输入数字和字母, 长度不限)
- 7.js中去掉字符串中的某个指定字符
- 二、js校验
- 思路
- 实例
- 1. 身份证
- input事件中
- blur事件中
一、正则的方法
1. reg.test(str) 判断字符串是否符合规则
判断字符串'abc'里有没有'a'
var reg = /a/;
console.log(reg.test('abc')) // true2. str.match(reg) 用正则提取字符串中的有用信息
需求: 把str字符串里的数字都提取出来
var str = '张三: 1000, 李四: 5000, 王二: 8000';
var result = str.match(/\d+/g);
console.log(result); // [1000, 5000, 8000]3. str.replace(reg, ‘*’) 正则替换
雪球: 把str中的数字都替换成*
var str = '张三: 1000, 李四: 5000, 王二: 8000';
var result = str.replace(/\d+/g, '*');
console.log(result); // '张三: *, 李四: *, 王二: *'实例
1.用户名:首位必须是字母,只能输入数字字母下划线,允许5-20字节
let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,19}$/;
if(reg.test(val) == false){
this.$message.error('用户名:首位必须是字母,只能输入数字字母下划线,允许5-20字节');
this[item] = '';
}2.工号:只能输入10个数字(长度必须是10位)
let reg = /^\d{10}$/;
if(reg.test(val) == false){
this.$message.error('工号:只能输入10个数字');
this[item] = '';
}3.角色名称:2-20个中文
let reg = /^[\u4e00-\u9fa5]{2,20}$/;
if(reg.test(val) == false){
this.$message.error('角色名称:请输入2-20个中文');
this[item] = '';
}4.指导价格:大于0的数字或小数(小数最多2位)
let reg = /^[+]?\d+(\.\d{0,2}$)?$|^$|^(\d+|\-){7,}$/;//大于0的数字或小数(小数最多2位)
if(reg.test(val) == false){
this.$message.error('指导价格:请输入数字,小数位最多2位');
this[item] = '';
}5.保留两位小数
val = Math.round(val*100)/1006.oninput事件控制input无法输入数字和字母以外的字符(只能输入数字和字母, 长度不限)
input: function (val, item) {
只能输入数字和字母, 字母只能在最后一位, 且字母只能是x
if (item == 'idCard') {
this[item] = val.replace(/[^(\d(X|x))]+/, '').toUpperCase();
}
只能输入数字
if (item == 'tel' || item == 'ver') {
this[item] = val.replace(/[^(\d)]+/, '')
}
},7.js中去掉字符串中的某个指定字符
假设一个data里面的数据是[tian,12],现在去掉[],代码如下
data=data.replace("[","");
data=data.replace("]","");
获得的就是tian,12
在new一个新的数组
var strs= new Array(); //定义一数组
strs=data.split(","); //字符分割
strs[0]就是tian
strs[1]就是12二、js校验
思路
- 以身份证为例, 不允许输入数字和x以外的内容, 应该给该表单元素加input事件
- 有时候只加input事件不能满足需求, 再加个blur事件. 例如, 输入的身份证号不满18位, input中对身份证整体的校验要满18位才进行, 这时候, 就需要失焦事件, 提示身份证输入不合法.
实例
1. 身份证
input事件中
let flag = {}; // 收集flag, 如果改表单校验通过, 就对应的flag为true. 最后, 所有的表单都校验通过,
// 就是所有的都为true, 那么允许进行下一步操作, 否则不允许. 棒棒~
getChange(item) {
this[item].replace(/\s/g, "");
// 身份证号码: 15位 数字; 18位 数字+x
if (item == "idCard") {
// 只允许输入需要的内容, 如果输入了不需要的内容, 就被''替换掉
this[item] = this[item].replace(/[^(\d(X|x))]+/, "").toUpperCase();
console.log(this[item]);
// 符合校验规则, flag为true, 反之反之
if (
(this[item].length == 15 || this[item].length == 18) &&
this.checkCardId1(this[item])
) {
this.flag.idCard = true;
} else {
this.flag.idCard = false;
}
}
}
// 这个方法的目的就是获取校验结果true或false, 因此没有任何弹窗或提示
checkCardId1(socialNo) {
// input时用
if (socialNo == "") {
return false;
}
if (socialNo.length != 15 && socialNo.length != 18) {
return false;
}
var area = {
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: "国外"
};
if (area[parseInt(socialNo.substr(0, 2))] == null) {
return false;
}
if (socialNo.length == 15) {
var pattern = /^\d{15}$/;
if (pattern.exec(socialNo) == null) {
return false;
}
var birth = parseInt("19" + socialNo.substr(6, 2));
var month = socialNo.substr(8, 2);
var day = parseInt(socialNo.substr(10, 2));
switch (month) {
case "01":
case "03":
case "05":
case "07":
case "08":
case "10":
case "12":
if (day > 31) {
return false;
}
break;
case "04":
case "06":
case "09":
case "11":
if (day > 30) {
return false;
}
break;
case "02":
if ((birth % 4 == 0 && birth % 100 != 0) || birth % 400 == 0) {
if (day > 29) {
return false;
}
} else {
if (day > 28) {
return false;
}
}
break;
default:
return false;
}
var nowYear = new Date().getYear();
if (nowYear - parseInt(birth) < 15 || nowYear - parseInt(birth) > 100) {
return false;
}
return true;
}
var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var lSum = 0;
var nNum = 0;
var nCheckSum = 0;
for (var i = 0; i < 17; ++i) {
if (socialNo.charAt(i) < "0" || socialNo.charAt(i) > "9") {
return false;
} else {
nNum = socialNo.charAt(i) - "0";
}
lSum += nNum * Wi[i];
}
if (socialNo.charAt(17) == "X" || socialNo.charAt(17) == "x") {
lSum += 10 * Wi[17];
} else if (socialNo.charAt(17) < "0" || socialNo.charAt(17) > "9") {
return false;
} else {
lSum += (socialNo.charAt(17) - "0") * Wi[17];
}
if (lSum % 11 == 1) {
return true;
} else {
return false;
}
}blur事件中
这个事件的校验中, 可以看到很多提示框节点. 因为此时该表单已经失焦了. 对用户输入的值进行了整体的校验.blur(value, item) {
var val = value.replace(/\s/g, '');
if (item === 'idCard') {
this.checkCardId(val);
}
}
// 参考博客:
// 二代身份证编码规则
// 方法本发 https://qiaolevip.iteye.com/blog/1468605
// 校验思路是:
// 1. 不允许为空
// 2. 位数只能是15或18位
// 3. 校验身份证号的前两位 -- 区域校验
// 4. 如果值是15位, 就按15身份号码的校验规则校验
// 一代和二代的区别 https://zhidao.baidu.com/question/34705668.html
// 5. 如果不是18位, 就按18位身份证号码的校验规则校验
checkCardId(socialNo) {
// blur时用
if (socialNo == "") {
alert("输入身份证号码不能为空!");
return false;
}
if (socialNo.length != 15 && socialNo.length != 18) {
alert("输入身份证号码格式不正确!");
return false;
}
var area = {
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: "国外"
};
if (area[parseInt(socialNo.substr(0, 2))] == null) {
alert("身份证号码不正确(地区非法)!");
return false;
}
if (socialNo.length == 15) {
var pattern = /^\d{15}$/;
if (pattern.exec(socialNo) == null) {
alert("15位身份证号码必须为数字！");
return false;
}
var birth = parseInt("19" + socialNo.substr(6, 2));
var month = socialNo.substr(8, 2);
var day = parseInt(socialNo.substr(10, 2));
switch (month) {
case "01":
case "03":
case "05":
case "07":
case "08":
case "10":
case "12":
if (day > 31) {
alert("输入身份证号码格式不正确2!");
return false;
}
break;
case "04":
case "06":
case "09":
case "11":
if (day > 30) {
alert("输入身份证号码格式不正确3!");
return false;
}
break;
case "02":
if ((birth % 4 == 0 && birth % 100 != 0) || birth % 400 == 0) {
if (day > 29) {
alert("输入身份证号码格式不正确4!");
return false;
}
} else {
if (day > 28) {
alert("输入身份证号码格式不正确5!");
return false;
}
}
break;
default:
alert("输入身份证号码格式不正确6!");
return false;
}
var nowYear = new Date().getYear();
if (nowYear - parseInt(birth) < 15 || nowYear - parseInt(birth) > 100) {
alert("输入身份证号码格式不正确7!");
return false;
}
return true;
}
var Wi = new Array(
7,
9,
10,
5,
8,
4,
2,
1,
6,
3,
7,
9,
10,
5,
8,
4,
2,
1
);
var lSum = 0;
var nNum = 0;
var nCheckSum = 0;
for (var i = 0; i < 17; ++i) {
if (socialNo.charAt(i) < "0" || socialNo.charAt(i) > "9") {
alert("输入身份证号码格式不正确8!");
return false;
} else {
nNum = socialNo.charAt(i) - "0";
}
lSum += nNum * Wi[i];
}
if (socialNo.charAt(17) == "X" || socialNo.charAt(17) == "x") {
lSum += 10 * Wi[17];
} else if (socialNo.charAt(17) < "0" || socialNo.charAt(17) > "9") {
alert("输入身份证号码格式不正确9!");
return false;
} else {
lSum += (socialNo.charAt(17) - "0") * Wi[17];
}
if (lSum % 11 == 1) {
return true;
} else {
alert("输入身份证号码格式不正确10!");
return false;
}
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
