html注册信息的实现的,JS+jQuery实现注册信息的验证功能

JS+jQuery实现注册信息的验证功能

2019-01-07

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了JS+jQuery实现注册信息的验证功能，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_0@用JS和JQuery实现的效果是一样的。

@H_404_0@HTML代码

请填写注册信息

用户名：文字母和数字组成的4-16位字符，以字母开头">

文字母和数字组成的4-10位字符">

@H_404_0@CSS样式

@H_404_0@JS代码

用户名

function check_userName() {

var userName = document.getElementById("name").value;

var regName = /[a-zA-Z]\w{4,16}/

if (userName == "" || userName.trim() == "") {

document.getElementById("err_name").innerHTML = "请输入用户名";

return false;

} else if (!regName.test(userName)) {

document.getElementById("err_name").innerHTML = "由英文字母和数字组成的4-16位字符，以字母开头";

return false;

} else {

document.getElementById("err_name").innerHTML = "ok!!!";

return true;

}

}

//验证昵称

function check_nickName() {

var nickName = document.getElementById("nick").value;

var regName = /[\u4e00-\u9fa5]{2,6}/

if (nickName == "" || nickName.trim() == "") {

document.getElementById("err_nick").innerHTML = "请输入昵称";

return false;

} else if (!regName.test(nickName)) {

document.getElementById("err_nick").innerHTML = "由2-6个汉字组成";

return false;

} else {

document.getElementById("err_nick").innerHTML = "ok!!!";

return true;

}

}

//验证邮箱

function check_email() {

var email = document.getElementById("email").value;

var regEmail = /^\w+@\w+((\.\w+)+)$/;

if (email == "" || email.trim() == "") {

document.getElementById("err_email").innerHTML = "请输入邮箱";

return false;

} else if (!regEmail.test(email)) {

document.getElementById("err_email").innerHTML = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn";

return false;

} else {

document.getElementById("err_email").innerHTML = "ok!!!";

return true;

}

}

//验证密码

function check_pwd() {

var pwd = document.getElementById("pwd").value;

var regPwd = /^\w{4,10}$/;

if (pwd == "" || pwd.trim() == "") {

document.getElementById("err_pwd").innerHTML = "请输入密码";

return false;

} else if (!regPwd.test(pwd)) {

document.getElementById("err_pwd").innerHTML = "格式错误";

return false;

} else {

document.getElementById("err_pwd").innerHTML = "ok!!!";

return true;

}

}

//确认密码

function check_pwd2() {

var pwd = document.getElementById("pwd").value;

var pwd2 = document.getElementById("pwd2").value;

if (pwd2 == "" || pwd2.trim() == "") {

document.getElementById("err_pwd2").innerHTML = "请输入密码";

return false;

} else if (!pwd2.equals(pwd)) {

document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致";

return false;

} else {

document.getElementById("err_pwd2").innerHTML = "ok!!!";

return true;

}

}

//验证手机号

function check_phone() {

var phone = document.getElementById("phone").value;

var regPhone = /[13,18]\d{9}/;

if (phone == "" || phone.trim() == "") {

document.getElementById("err_phone").innerHTML = "请输入手机号";

return false;

} else if (!regPhone.test(phone)) {

document.getElementById("err_phone").innerHTML = "手机号由11位数字组成，且以13,18开头";

return false;

} else {

document.getElementById("err_phone").innerHTML = "ok!!!";

return true;

}

}

//验证时间

function check_date() {

var birthday = document.getElementById("birthday").value;

var regDate = /[13,18]\d{9}/;

if (birthday == "" || birthday.trim() == "") {

document.getElementById("err_date").innerHTML = "请输入日期";

return false;

} else if (!regDate.test(birthday)) {

document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间";

return false;

} else {

document.getElementById("err_date").innerHTML = "ok!!!";

return true;

}

}

@H_404_0@Jquery代码

用户名不能为空";

} else if (!regName.test(userName)) {

errMsg = "由英文字母和数字组成的4-16位字符，以字母开头";

} else {

errMsg = "OK！";

}

$(this).parent().append(errMsg);

} else if ($(val).attr("name") == "nickName") {

$(".nickMsg").remove();

var nickName = val.value;

var regName = /[\u4e00-\u9fa5]{2,6}/

if (nickName == "" || nickName.trim() == "") {

errMsg = "昵称不能为空";

} else if (!regName.test(nickName)) {

errMsg = "由2-6个汉字组成";

} else {

errMsg = "OK！";

}

$(this).parent().append(errMsg);

} else if ($(val).attr("name") == "email") {

$(".emailMsg").remove();

var email = val.value;

var regEmail = /^\w+@\w+((\.\w+)+)$/;

if (email == "" || email.trim() == "") {

errMsg = "@H_502_32@邮箱不能为空";

} else if (!regEmail.test(email)) {

errMsg = "@H_502_32@邮箱账号@域名。如good@tom.com、whj@sina.com.cn";

} else {

errMsg = "@H_502_32@OK！";

}

$(this).parent().append(errMsg);

} else if ($(val).attr("name") == "pwd") {

$(".pwdMsg").remove();

var pwd = val.value;

var regPwd = /^\w{4,10}$/;

if (pwd == "" || pwd.trim() == "") {

errMsg = "密码不能为空";

} else if (!regPwd.test(pwd)) {

errMsg = "格式错误";

} else {

errMsg = "OK！";

}

$(this).parent().append(errMsg);

} else if ($(val).attr("name") == "pwd2") {

$(".pwd2Msg").remove();

var pwd2 = val.value;

var pwd = $("input")[3].value;

if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) {

errMsg = "两次输入密码不一致";

} else {

errMsg = "OK！";

}

$(this).parent().append(errMsg);

} else if ($(val).attr("name") == "phone") {

$(".phoneMsg").remove();

var phone = val.value;

var regPhone = /[13,18]\d{9}/;

if (phone == "" || phone.trim() == "") {

errMsg = "手机号不能为空 < /span>"

} else if (!regPhone.test(phone)) {

errMsg = "格式错误 < /span>"

} else {

errMsg = "OK！ < /span>"

}

$(this).parent().append(errMsg);

} else if ($(val).attr("name") == "date") {

$(".dateMsg").remove();

var birthday = val.value;

var regDate = /(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/;

if (birthday == "" || birthday.trim() == "") {

errMsg = "请输入生日";

} else if (!regDate.test(birthday)) {

errMsg = "格式错误";

} else {

errMsg = "OK！";

}

$(this).parent().append(errMsg);

}

});

});

});

@H_404_0@

总结

@H_404_0@以上所述是小编给大家介绍的JS+jQuery实现注册信息的验证功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！