~function () {
var form = document.getElementById('form'),
tel = form.username,
pass = form.pass,
repass = form.repass,
yzm = form.yzm,
verify = form.verify,
btn = form.btn;
var b = document.createElement('b');
b.className = 'mB';
console.log(b);
b.innerText = getRandomChar();
yzm.parentNode.insertBefore(b, utils.next(yzm));
function getRandomChar() {
var char = "0123456789";
var str = '';
for (var i = 0; i < 5; i++) {
str += char[utils.getRandomNumber(0, char.length - 1)];
}
return str;
}
b.onclick = function () {
b.innerText = getRandomChar();
}
var reg = {
tel: /^1[356789]\d{9}$/,
pass: /^\w{6,16}$/
};
var arr = [false, false, false, false, false];
tel.onblur = function () {
var val = this.value;
var em = utils.next(this);
if (tel.value.length === 0) {
em.innerText = "请输入手机号!";
em.style.color = "#999";
} else {
if (reg.tel.test(val)) { //符合
em.innerText = "√";
em.style.color = "#f60";
arr[0] = true;
} else { //不符合
em.innerText = "账号格式不正确!";
em.style.color = "#f60";
arr[0] = false;
}
}
}
pass.onblur = function () {
var val = this.value;
var em = utils.next(this); //提示标签
if (pass.value.length === 0) {
em.innerText = "请输入密码!";
em.style.color = "#999";
} else {
if (reg.pass.test(val)) { //符合
em.innerText = "√";
em.style.color = "#f60";
arr[1] = true;
} else { //不符合
em.innerText = "密码应该为6-20位之间!";
em.style.color = "#f60";
arr[1] = false;
}
}
}
repass.onblur = function () {
var val = this.value;
var em = utils.next(this); //提示标签
if (repass.value.length === 0) {
em.innerText = "请再次输入密码!";
em.style.color = "#999";
} else {
if (pass.value && pass.value === val) { //符合
em.innerText = "√";
em.style.color = "#f60";
arr[2] = true;
} else { //不符合
em.innerText = "两次密码不一致!";
em.style.color = "#f60";
arr[2] = false;
}
}
}
yzm.onblur = function () {
var val = this.value;
var em = utils.next(utils.next(this)); //提示标签
if (yzm.value.length === 0) {
em.innerText = "请输入验证码!";
em.style.color = "#999";
} else {
if (this.value.toUpperCase() === utils.next(this).innerText.toUpperCase()) { //符合
em.innerText = "√";
em.style.color = "#f60";
arr[3] = true;
} else { //不符合
em.innerText = "验证码不正确!";
em.style.color = "#f60";
arr[3] = false;
}
}
}
verify.onblur = function () {
var val = this.value;
var em = utils.next(utils.next(this)); //提示标签
if (verify.value.length === 0) {
em.innerText = "请输入验证码!";
em.style.color = "#999";
} else {
if (this.value ===yzm.value) { //符合
em.innerText = "√";
em.style.color = "#f60";
arr[4] = true;
} else { //不符合
em.innerText = "验证码不正确!";
em.style.color = "#f60";
arr[4] = false;
}
}
}
btn.onclick=function(){
tel.onblur();
pass.onblur();
repass.onblur();
yzm.onblur();
verify.onblur();
var resBool = arr.every(function (item) {
return item;
});
if (resBool) {
// 传递给服务器的参数
var para = `tel=${tel.value}&pass=${pass.value}`;
//存储到客户端的对象
var obj = {};
obj.tel = tel.value;
obj.pass = pass.value;
ajax({
url: "./data/register.json?" + para,
dataType: "json",
success: function (data) {
alert(data.msg);
// 存储到客户端
// 先取
// 从localStorage取出来都是json格式字符串
var arr = JSON.parse(localStorage.getItem("user"));
if (!arr) { //没有取到
// 设置
localStorage.setItem("user", JSON.stringify([obj]));
} else {
arr.push(obj);
localStorage.setItem("user", JSON.stringify(arr));
}
// 跳转到登录页面
window.location.href = "./login.html";
localStorage.setItem("id", tel.value);
}
});
}
// 阻止submit 的默认行为
return false;
}
}();
输入框正则校验
最新推荐文章于 2024-01-10 16:32:03 发布