JavaWeb-表單的及時驗證,在輸入後就可以立即驗證(含使用者型別,性別,愛好...的驗證)
阿新 • • 發佈:2018-12-30
//及時驗證使用者名稱
function checkuse(){
//在每個函式中定義check變數是為了在表單提交後,能夠逐個驗證每個函式是否通過,很好很好。(以下同理)
var check;
var username = document.getElementById("username").value;
if (username.length > 18 || username.length < 6) {
alert("使用者名稱輸入不合法,請重新輸入!");
//此處甚妙,既然你在此處輸入錯誤,那麼按理說當然要在此處繼續輸入了。(在此處繼續獲取焦點!)
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "* 使用者名稱由6-18位字元組成 √";
check = true;
}
return check;
}
//利用正則表示式判斷密碼符合否
function checkpwd() {
var check;
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 18 || regs.test(password)) {
alert("密碼輸入不合法,請重新輸入!" );
document.getElementById("password").focus();
check = false;
} else {
document.getElementById("checktext2").innerHTML = "* 密碼由6-18位字元組成,且必須包含字母、數字和標點符號 √";
check = true;
}
return check;
}
//驗證密碼是否不一致!
function checkpwdc() {
var check;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
alert("兩次輸入密碼不一致,請重新輸入!");
document.getElementById("pwdc").focus();
check = false;
} else {
document.getElementById("checktext3").innerHTML = "* 請再次輸入你的密碼 √";
check = true;
}
return check;
}
//提交時驗證使用者類別
function checkut(){
var check;
if(document.getElementById("selUser").selectedIndex == 0)
{
alert("請選擇使用者型別!");
document.getElementById("selUser").focus();
check = false;
}else{
document.getElementById("checktext4").innerHTML = "* 請選擇使用者型別 √";
check = true;
}
return check;
}
//提交時驗證使用者性別
function checkGender(){
var check;
var gender = "";
//獲取所有名稱為sex的標籤
var sex = document.getElementsByName("sex");
//遍歷這些名稱為sex的標籤
for(var i=0;i<sex.length;++i){
//如果某個sex被選中,則記錄
if(sex[i].checked)
gender = sex[i].value;
}
if(gender == "")
{
alert("請選擇性別!");
check = false;
}else{
document.getElementById("checktext5").innerHTML = "* 請選擇你的性別 √";
check = true;
}
return check;
}
//及時驗證出生日期
function checkDate(){
var check;
if(document.getElementById("txtDate").value ==""){
alert("請填寫出生日期!");
document.getElementById("txtDate").focus();
check = false;
}else{
document.getElementById("checktext6").innerHTML = "* 請選擇你的出生日期 √";
check = true;
}
return check;
}
//及時驗證興趣愛好
function checkHobby(){
var check;
var hobby = 0;
//objNum為所有名稱為hobby的input標籤
var objNum = document.getElementsByName("hobby");
//遍歷所有hobby標籤
for(var i=0;i<objNum.length;++i){
//判斷某個hobby標籤是否被選中
if(objNum[i].checked==true)
hobby++;
}
//如果有選中的hobby標籤
if(hobby >=1){
document.getElementById("checktext7").innerHTML = "* 請選擇你的興趣愛好 √";
check = true;
}else{
alert("請填寫愛好!");
check = false;
}
return check;
}
//正則表示式驗證電子郵件(及時)
function checkemail(){
var check;
//電子郵件的正則表示式
var e1 = document.getElementById("email").value.indexOf("@",0);
var e2 = document.getElementById("email").value.indexOf(".",0);
if(email == "" || (e1==-1 || e2==-1) || e2<e1 )
{
alert("E_mail輸入錯誤!");
document.getElementById("email").focus();
check = false;
} else {
document.getElementById("checktext8").innerHTML = "* 請填寫常用的EMAIL,將用於密碼找回 √";
check = true;
}
return check;
}
//及時驗證自我介紹
function checkintro(){
var check;
var intro = document.getElementById("introduction").value;
if (intro.length > 100) {
alert("字數超限!");
check = false;
} else {
document.getElementById("checktext9").innerHTML = "* 限100字內 √";
document.getElementById("checktext9").focus();
check = true;
}
return check;
}
//提交表單時所有都驗證一遍(若任何一個驗證不通過,則返回為false,阻止表單提交)
function check() {
var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
&& checkemail() &&checkintro();
return check;
}