1.注册按钮的cursor的not-allowed属性,内容没填无法提交。
ckbox.onclick = function () {
if (this.checked) {
submitinfo.className = "bgcolor";
submitinfo.style.cursor = "pointer";
} else {
submitinfo.className = "";
}
}
2.所有input失去焦点事件
for (var i = 0; i < useritem.length; i++) {
useritem[i].index = i;
useritem[i].onblur = function () {
formlist[this.id].call(this);
}
}
3.表单提交事件,error记录input值为空的情况,error.length=0,才能提交
formuser.onsubmit = function () {
if (ckbox.checked) {
for (var i = 0; i < useritem.length; i++) {
useritem[i].focus();
}
submitinfo.focus();
//input显示error错误的个数
var errlength = document.getElementsByClassName("error").length;
if (errlength) {
return false;
}
return true;
} else {
return false;
}
}
4.密码明文暗文切换
eyebtn[0].onclick=function () {
if(useritem[1].type=="password"){
this.src="./img/eye.png";
useritem[1].type="text";
}else{
this.src="./img/eye1.png";
useritem[1].type="password";
}
}
eyebtn[1].onclick=function () {
if(useritem[2].type=="password"){
this.src="./img/eye.png";
useritem[2].type="text";
}else{
this.src="./img/eye1.png";
useritem[2].type="password";
}
}
5.写正则匹配
①用户名
userid: function () {
if (this.value.trim()) {
if (this.value.trim().length >= 4 && this.value.trim().length <= 20) {
//使用正则表达式去验证
if (this.value.trim().match(/^[0-9]{4,20}$/)) {
spaninfo[this.index].className = "spaninfo error";
spaninfo[this.index].innerHTML = "账号不能是纯数字";
}
else {
spaninfo[this.index].className = "spaninfo success";
}
}
else {
spaninfo[this.index].className = "spaninfo error";
spaninfo[this.index].innerHTML = "*账号名长度要在4-20位之间";
}
}
else {
spaninfo[this.index].className = "spaninfo error";
spaninfo[this.index].innerHTML = "*账号名长度要在4-20位之间";
}
}
其余同理。
正则表达式exp
咋用??
1.exp.test(str) 返回true,false
2.str.match(exp) 返回集合或者null
var exp=/^[0-9]{5}$/; //正则表达式
var str="23443";
var str1="123";
1.
console.log(exp.test(str));//返回true
console.log(exp.test(str1));//返回false
2.
console.log(str.match(exp));//返回集合
console.log(str1.match(exp));//错误,则返回null
符号表一览:
\ 转义字符
^ 代表表达式的开始位置
$ 代表的是结束位置
* 匹配前面的子表达式0次或多次
+ 匹配前面的子表达式1次或多次
? 匹配前面的子表达式0次或1次
{} 限定符 限定前面子表达式的次数
{n} 匹配前面的子表达式n次
{n,} 匹配前面的子表达式至少n次 或者多次
{n,m} 至少匹配n次 做多m次 n<=m
| 或 (z|f)ood zood food
[] 集合
[abc] 匹配的是字符串里面的a | b | c
[^abc] 匹配的是非 a| b|c 的其他字符
[0-9] [a-z] [A-Z] 匹配的是范围集合
[^0-9]除过0-9 之外的其他值
() 括子表达式的
\b 匹配单词的边界 单词和空格直接的位置
\B 匹配的是单词非边界 (包含中间和开始)
g 全局查找
\d 匹配数字 [0-9]
\D 匹配非数字 [^0-9]
\n 换行符
\r 回车
\s 匹配空白字符 空格 换行 回车
\S 匹配非空白字符 除了空格 换行 回车 其他的
\w 匹配 [0-9a-zA-Z_]
\W 匹配 [^0-9a-zA-Z_]
一般用法:
//邮箱正则怎么写
var ereg=/^\w{5,10}\@((qq)|(sina)|(163))\.((com)|(cn)|(xyz))$/;
var email="abcsed@163.com";
console.log(email.match(ereg));
//电话号码 正则
var telreg=/^1[34578]{1}\d{9}$/;
var tel="12212312312";
console.log(tel.match(telreg));
//一般的网址 正则
//https://www.baidu.com
var wreg=/^(http|https)\:\/{2}(www)\.[0-9a-zA-Z]+\.com$/;
var zhi="http://www.baidu.com";
console.log(zhi.match(wreg));
//身份证 正则
var sf="610324199801011311";
var sfz=/^[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]$/
console.log(sf.match(sfz));