表單資訊註冊驗證
阿新 • • 發佈：2019-01-05
這裡分為了js和jquery 兩個版本，挺重要的記錄下來
HTML程式碼
JS 程式碼<legend> 請填寫註冊資訊</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>使用者名稱：</td> <td><input type="text" name="userName" placeholder="由英文字母和數字組成的4-16位字元，以字母開頭"> </td> </tr> <tr> <td>暱稱：</td> <td><input type="text" name="nickName" placeholder="由2-6個漢字組成"> </td> </tr> <tr> <td>郵箱：</td> <td><input type="text" name="email" placeholder="郵箱賬號@域名。如[email protected]、[email protected]"> </td> </tr> <tr> <td>密碼：</td> <td><input type="password" name="pwd" placeholder="由英文字母和數字組成的4-10位字元"> </td> </tr> <tr> <td>確認密碼：</td> <td><input type="password" name="pwd2" placeholder="確認密碼"> </td> </tr> <tr> <td>手機號碼：</td> <td><input type="text" name="phone" placeholder="手機號由11位數字組成，且以13,15,18開頭"> </td> </tr> <tr> <td>出生日期：</td> <td><input type="text" name="date" placeholder="出生日期在1990-2009之間"> </tr> <tr> <td colspan="2" align="left"><input type="button" name="submit" value="提交"></td> </tr> </table> </form> </fieldset>
//驗證使用者名稱
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 = /^\ jQuery 程式碼
$(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 = "<span class='nameMsg' style='color:red;'>使用者名稱不能為空</span>";
} else if (!regName.test(userName)) {
errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和數字組成的4-16位字元，以字母開頭</span>";
} else {
errMsg = "<span class='nameMsg' style='color:red;'>OK！</span>";
}
$(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 = "<span class='nickMsg' style='color:red;'>暱稱不能為空</span>";
} else if (!regName.test(nickName)) {
errMsg = "<span class='nickMsg' style='color:red;'>由2-6個漢字組成</span>";
} else {
errMsg = "<span class='nickMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "email") {
$(".emailMsg").remove();
var email = val.value;
var regEmail = /^\[email protected]\w+((\.\w+)+)$/;
if (email == "" || email.trim() == "") {
errMsg = "<span class='emailMsg' style='color:red;'>郵箱不能為空</span>";
} else if (!regEmail.test(email)) {
errMsg = "<span class='emailMsg' style='color:red;'>郵箱賬號@域名。如[email protected]、[email protected]</span>";
} else {
errMsg = "<span class='emailMsg' style='color:red;'>OK！</span>";
}
$(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 = "<span class='pwdMsg' style='color:red;'>密碼不能為空</span>";
} else if (!regPwd.test(pwd)) {
errMsg = "<span class='pwdMsg' style='color:red;'>格式錯誤</span>";
} else {
errMsg = "<span class='pwdMsg' style='color:red;'>OK！</span>";
}
$(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 = "<span class='pwd2Msg' style='color:red;'>兩次輸入密碼不一致</span>";
} else {
errMsg = "<span class='pwd2Msg' style='color:red;'>OK！</span>";
}
$(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 class = 'phoneMsg' style = 'color:red;' > 手機號不能為空 < /span>"
} else if (!regPhone.test(phone)) {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式錯誤 < /span>"
} else {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 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 = "<span class='dateMsg' style='color:red;'>請輸入生日</span>";
} else if (!regDate.test(birthday)) {
errMsg = "<span class='dateMsg' style='color:red;'>格式錯誤</span>";
} else {
errMsg = "<span class='dateMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
}
});
});
});