JavaScript校验表单实例

页面导航:首页 > 网络编程 > JavaScript > JavaScript校验表单实例

JavaScript校验表单实例

来源: 作者: 时间:2016-02-04 09:15 【

如果你正在创建一个响应式站点,它包含一些输入表单,那么你就应该校验用户输入的数据。如果是一个注册表单你不得不校验名字、姓氏、Email、用户名、年龄,压缩编码和一些其它的

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

我们验证什么?

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

 

 



<script src=validation.js></script>

Registration Form

  • Male Female
  • English Non English

整个HTML代码都是注册表单。我们并没有把它做的很漂亮,因为我们仅仅是打算用它实现我们校验它的目的。我们给它一个名字叫做““Registration Form””和在下面放一些标签和输入字段在一个无序的列表里,它包括:user id, password, name, address, zip code, e-mail等等。我们也包含两个选择框,分别是sex和language两个标签,此外,还有一个countries的下拉列表(我们仅仅列出了5个,并不是所有国家的列表)和一个提交按钮,现在,我们可以校验从这些输入框里面得到的信息了。

 

 

校验函数

现在我们有了一个得到信息的注册表单,接下来我们将致力于校验函数的编写了。首先,我们创建一个名字为“validation.js”的文件(或者你可以改成任意你想要的名字,但是当你处理它的时候要和你自己的名字保持一致)。

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按钮的时候才会被触发。

 

 
 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<