JavaScript校正表單一實例

JavaScript校正表單一實例

如果你正在建立一個響應式網站，它包含一些輸入表單，那麼你就應該校正使用者輸入的資料。如果是一個註冊表單你不得不校正名字、姓氏、Email、使用者名稱、年齡，壓縮編碼和一些其它的欄位，你沒有必要發一些不需要的響應到你的伺服器。下面你將學會怎麼用JavaScript實現這樣的功能。

我們驗證什嗎？

讓我們開始建立一個帶有多個輸入欄位的這冊表單，以至於我們能夠更加形象的舉例。建立一個名字為index.html的HTML檔案，代碼如下：

 

 

<script src=validation.js></script>Registration Form
整個HTML代碼都是註冊表單。我們並沒有把它做的很漂亮，因為我們僅僅是打算用它實現我們校正它的目的。我們給它一個名字叫做““Registration Form””和在下面放一些標籤和輸入欄位在一個無序的列表裡，它包括：user id, password, name, address, zip code, e-mail等等。我們也包含兩個選擇框，分別是sex和language兩個標籤，此外，還有一個countries的下拉式清單（我們僅僅列出了5個，並不是所有國家的列表）和一個提交按鈕，現在，我們可以校正從這些輸入框裡面得到的資訊了。

 

 

校正函數

現在我們有了一個得到資訊的註冊表單，接下來我們將致力於校正函數的編寫了。首先，我們建立一個名字為“validation.js”的JavaScript檔案（或者你可以改成任意你想要的名字，但是當你處理它的時候要和你自己的名字保持一致）。

User Id 校正

校正的第一個欄位是user id. 看下面的函數:

 

 

function validateUsername(fld) {    var error = ;    var illegalChars = /W/; // allow letters, numbers, and underscores    if (fld.value == ) {        fld.style.background = 'Yellow';        error = You didn't enter a username.;        alert(error);        return false;    } else if ((fld.value.length < 5) || (fld.value.length > 12)) {        fld.style.background = 'Yellow';        error = The username is the wrong length.;        alert(error);        return false;    } else if (illegalChars.test(fld.value)) {        fld.style.background = 'Yellow';        error = The username contains illegal characters.;        alert(error);        return false;    } else {        fld.style.background = 'White';    }    return true;}

通過這個函數，使用者不能留下一個空白的欄位，它只能包括字母，數字和底線，但是不能有正斜線和反斜線。如果欄位為空白，長度小於5個或大於12個和包含非法字元，將彈出一個警告。

密碼校正

密碼是另一個必須校正的欄位. 檢查代碼如下:

 

 

function validatePassword(fld) {    var error = ;    var illegalChars = /[W_]/; // allow only letters and numbers     if (fld.value == ) {        fld.style.background = 'Yellow';        error = You didn't enter a password.;        alert(error);        return false;     } else if ((fld.value.length < 7) || (fld.value.length > 15)) {        error = The password is the wrong length. ;        fld.style.background = 'Yellow';        alert(error);        return false;     } else if (illegalChars.test(fld.value)) {        error = The password contains illegal characters.;        fld.style.background = 'Yellow';        alert(error);        return false;     } else if ( (fld.value.search(/[a-zA-Z]+/)==-1) || (fld.value.search(/[0-9]+/)==-1) ) {        error = The password must contain at least one numeral.;        fld.style.background = 'Yellow';        alert(error);        return false;     } else {        fld.style.background = 'White';    }   return true;}

 

在一次，我們只允許這個欄位出現字母和數字（但是這次沒有底線），如果欄位為空白，包含一些非法字元，或者不包含至少一個數字將彈出警告。

Name校正

校正 users name, 代碼如下:

 

 

function allLetter(uname){    var letters = /^[A-Za-z]+$/;    if(uname.value.match(letters))    {        return true;    }    else    {        alert('Username must have alphabet characters only');        return false;    }}

如果名字的組成僅僅通過字母組成，函數將返回true，否則將彈出警告。

地址校正

我們用下面的代碼來校正地址：

 

 

 

function alphanumeric(uadd){    var letters = /^[0-9a-zA-Z]+$/;    if(uadd.value.match(letters))    {        return true;    }    else    {        alert('User address must have alphanumeric characters only');        return false;    }}

如果address不僅僅只包含字母和數字，那麼這個程式碼片段將彈出警告。

Country 校正

因為你已經給使用者一個countries的列表，校正的情況僅僅是從列表裡面選擇一個國家，代碼將這樣寫：

 

 

 

function countryselect(ucountry){    if(ucountry.value == Default)    {        alert('Select your country from the list');        return false;    }    else    {        return true;    }}

如果使用者選擇的是一個預設的值，講給他一個警告。

ZIP code 驗證

ZIP code 只能是數字, 因此下面函數彈出警告的內容是“ZIP code should have numeric characters only”:

 

 

function allnumeric(uzip){    var numbers = /^[0-9]+$/;    if(uzip.value.match(numbers))    {        return true;    }    else    {        alert('ZIP code must have numeric characters only');        return false;    }}

Email 校正

Email是與username和password欄位一起在表單中最有用的輸入欄位之一，它也是這些欄位中最需要校正的一個，看如下代碼：

 

 

 

function checkEmail() {    var email = document.getElementById('txtEmail');    var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;    if (!filter.test(email.value)) {    alert('Please provide a valid email address');    email.focus;    return false; }}

這個函數檢查的是一個Email的字串格式的第一部分包含的字元必須是大小寫字母和數字，緊接著一個“@”符號，緊接著一個大小寫字母和數字，接著一個點，最後再一次包含2到4個大小寫字母和數位字元。如果字串不是這個結構，將彈出警告說Email是非法的。

Gender 校正

表單中的性別輸入是一個必須被選擇的選項按鈕。校正函數如下：

 

 

function validgender(mgender,fgender){    x=0;    if(mgender.checked)    {        x++;    } if(fgender.checked){    x++;}    if(x==0)    {        alert('Select Male/Female');        return false;    }    else    {        alert('Form Successfully Submitted');        window.location.reload()        return true;}}

這個函數僅僅是確保選項被選中，否則將彈出警告要求使用者選擇按鈕。僅僅是相同的函數不同的變數來校正language。

母校正器

以上這些所有的校正函數都應該被包含在一個叫做onSubmit的單個校正函數裡面

這個函數是這樣的：

 

 

 

function formValidation(){    var uid = document.registration.userid;    var passid = document.registration.passid;    var uname = document.registration.username;    var uadd = document.registration.address;    var ucountry = document.registration.country;    var uzip = document.registration.zip;    var uemail = document.registration.email;    var mgender = document.registration.msex;    var fgender = document.registration.fsex;         if(validateUsername(uid,5,12))    {        if(validatePassword(passid,7,12))        {            if(allLetter(uname))            {                if(alphanumeric(uadd))                {                    if(countryselect(ucountry))                    {                        if(allnumeric(uzip))                        {                            if(ValidateEmail(uemail))                            {                                if(validgender(mgender,fgender))                                {                                }                            }                        }                    }                }            }        }    }    return false;}

注意這個主校正器只有在點擊submit按鈕的時候才會被觸發。