JavaScript校验表单实例

来源：互联网发布：hdfs如何保证数据可靠编辑：程序博客网时间：2024/06/07 01:44

如果你正在创建一个响应式站点，它包含一些输入表单，那么你就应该校验用户输入的数据。如果是一个注册表单你不得不校验名字、姓氏、Email、用户名、年龄，压缩编码和一些其它的字段，你没有必要发一些不需要的响应到你的服务器。下面你将学会怎么用JavaScript实现这样的功能。

我们验证什么？

让我们开始创建一个带有多个输入字段的这册表单，以至于我们能够更加形象的举例。创建一个名字为index.html的HTML文件，代码如下：

<!DOCTYPE html><html><head>    <title>Validation</title>    <script src="validation.js"></script></head><body onload="document.registration.userid.focus();"><h1>Registration Form</h1><form name='registration' onSubmit="return formValidation();">    <ul>        <li>            <label for="userid">User id:</label>            <input type="text" name="userid" size="12" />        </li>        <li>            <label for="passid">Password:</label>            <input type="password" name="passid" size="12" />        </li>        <li>            <label for="username">Name:</label>            <input type="text" name="username" size="50" />        </li>        <li>            <label for="address">Address:</label>            <input type="text" name="address" size="50" />        </li>        <li>            <label for="country">Country:</label>            <select name="country">                <option selected="" value="Default">(Please select a country)</option>                <option value="AF">Afghanistan</option>                <option value="AL">Albania</option>                <option value="ALG">Algeria</option>                <option value="AND">Andorra</option>                <option value="ANG">Angola</option>            </select>        </li>        <li>            <label for="zip">ZIP Code:</label>            <input type="text" name="zip" />        </li>        <li>            <label for="email">Email:</label>            <input type="text" name="email" size="50" />        </li>        <li>            <label id="gender">Sex:</label>            <input type="radio" name="sex" value="Male" />            <span>Male</span>            <input type="radio" name="sex" value="Female" />            <span>Female</span>        </li>        <li>            <label>Language:</label>                <input type="checkbox" name="en" value="en" checked />                <span>English</span>                <input type="checkbox" name="nonen" value="nonen" />                <span>Non English</span>        </li>        <li><input type="submit" name="submit" value="Submit" /></li>    </ul></form></body></html>

整个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.\n";        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.\n";        alert(error);        return false;    } else if (illegalChars.test(fld.value)) {        fld.style.background = 'Yellow';        error = "The username contains illegal characters.\n";        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.\n";        alert(error);        return false;     } else if ((fld.value.length < 7) || (fld.value.length > 15)) {        error = "The password is the wrong length. \n";        fld.style.background = 'Yellow';        alert(error);        return false;     } else if (illegalChars.test(fld.value)) {        error = "The password contains illegal characters.\n";        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.\n";        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按钮的时候才会被触发。

原文链接：http://www.webcodegeeks.com/javascript/javascript-form-validation-example/

你可以下载这个例子的所有源码http://webcodegeeks.javacodegeeks.netdna-cdn.com/wp-content/uploads/2014/12/FormValidation.zip

0 0