How to use JS+jQuery to verify registration information

php中世界最好的语言
Release: 2018-04-23 17:29:15
Original
1633 people have browsed it

This time I will show you how to use JS jQuery to verify registration information, and what are the precautionsfor using JS jQuery to verify registration information. The following is a practical case, let's take a look.

The effect achieved with JS and JQuery is the same.

HTML code

 请填写注册信息 
用户名:
昵称:
邮箱:
密码:
确认密码:
手机号码:
出生日期:
Copy after login
CSS style

body { text-align: center; padding: 0; margin: 0; } fieldset { width: 800px; } table tr td ~ td { text-align: left; width: 600px; }
Copy after login
JS code

//验证用户名 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,15,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,15,18开头"; return false; } else { document.getElementById("err_phone").innerHTML = "ok!!!"; return true; } } //验证时间 function check_date() { var birthday = document.getElementById("birthday").value; var regDate = /[13,15,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; } }
Copy after login
Jquery code

$(function () { var errMsg; $.each($("input"), function (i, val) { $(val).blur(function () { if ($(val).attr("name") == "userName") { $(".nameMsg").remove(); var userName = val.value; var regName = /[a-zA-Z]\w{4,16}/ if (userName == "" || userName.trim() == "") { errMsg = "用户名不能为空"; } 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 = "邮箱不能为空"; } else if (!regEmail.test(email)) { errMsg = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn"; } else { errMsg = "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,15,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); } }); }); });
Copy after login
I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

asp.net jquery.form makes asynchronous image upload function

How to use it in jQuery cycle

The above is the detailed content of How to use JS+jQuery to verify registration information. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!