表单验证

最新推荐文章于 2024-04-16 11:57:14 发布

laola的故事

最新推荐文章于 2024-04-16 11:57:14 发布

阅读量497

点赞数

分类专栏：前端文章标签：前端表单

本文链接：https://blog.csdn.net/u013266600/article/details/56037761

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

近来有机会接触前端，学习过程中便记录下来。

HTMl 代码

<!DOCTYPE html>
<html>
    <head>
        <title>Car Picker</title>
        <link rel="stylesheet" href="整合版的例子.css">
    </head>
    <body>
    <h2 class="centered">Car Picker</h2>
    <form action="someAction.cgi">
        <p>
            <label for="emailAddr">Email Address:
            <input id="emailAddr" type="text" size="30" class="reqd email">
            </label>
        </p>
        <p>
            <label for="color">Colors:
                <select id="color" class="reqd">
                    <option value="" selected>Choose a color</option>
                    <option value="Red">Red</option>
                    <option value="green">Green</option>
                    <option value="blue">Blue</option>
                </select>
            </label>
        </p>
        <p>Options:
            <label for="sunroof"><input type="checkbox" id="sunroof" value="yes">Sunroof(Two door only)</label>
            <label for="pWindows"><input type="checkbox" id="pWindows" value="yes">Power Windows</label>
        </p>
        <p>
            <label for="DoorCt">Doors:&nbsp;&nbsp;
                <input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">Two
                <input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">Four
            </label>
        </p>
        <p><label for="zip">Enter your Zip code or pick the dealer nearest you:<br>
        Zip:<input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList">
            <select id="dealerList" size="4" class="zip">
                    <option value="California--Lemon Grove">California--Lemon Grove</option>
                    <option value="California--Lomita">California--Lomita</option>
                    <option value="California--Long Beach">California--Long Beach</option>
                    <option value="California--Los Alamitos">California--Los Alamitos</option>
                    <option value="California--Los Angeles">California--Los Angeles</option>
            </select>       
        </p>
        <p><input type="submit" value="submit">&nbsp;<input type="reset"></p>
    </form>
        <script src="整合版的例子.js"></script>
    </body>
</html>

非常简单的一个页面，其中包括输入框，单选按钮，复选框，下拉列表等。

CSS代码

body{
color:#000;
background-color:#fff;
}
input.invalid{
background-color:#ff9;
border:2px red inset;
}
label.invalid{
color:#f00;
font-weight:bold;
}
select{
margin-left:80px;
}
input{
margin-left:30px;
}
input+select,input+input{
margin-left:20px;
}
.centered{
text-align:center;
}
和平常css无任何不同

JS 代码

处理单选按钮

单选按钮表示用户必须在每一组选项中选择一个选项。基本思路是：遍历每个按钮并且检查它的状态。如果没有选择按钮，就将单选按钮的标签和按钮本身转换成其他颜色。

/*含义：处理单选按钮事件
radioName：标签的名称
*/
function radioChecked(radioName)
{
    var radioset ="";
    for(var i=0;i<document.forms.length;i++)
    {
        if(!radioset)
        {
        radioset = document.forms[i][radioName];
        }
    }
    if(!radioset)
    {
        return false;
    }
    for(var k=0;k<radioset.length;k++)
    {
        if(radioset[k].checked)
        {
            return true;
        }
    }
    return false;
}

用一个字段设置另一个字段

在表单上常见一种情况，如果用户作出选择，那么这个选择会影响表单上其他字段的值。这种问题有两种处理思路：第一种是检查输入，如果用户作出错误选择，就弹出警告对话框；当然还有更好的方法就是替用户做输入。比如，我选择了宠物猫，自动默认四条腿（举例，勿喷~）
在上述例子中，处理如下：

    document.getElementById("sunroof").onclick=doorset;
    function doorset()
{
    if(this.checked)
    {
        document.getElementById("twoDoor").checked = true;
    }

    else
    {
        document.getElementById("twoDoor").checked = false;
    }

}

验证电子邮件地址

存在的正则表达式，可以让我们快速的验证某些输入是否合法。如果不用正则表达式，该如何操作呢？真正验证电子邮件地址还是很复杂的，下面的代码只是简单的判断。

/*含义：验证Email地址*/
function validEmail(email)
{
    var invalidChars=" ?:,;";   //电子邮件地址中最可能出现的5个无效字符：空格、斜杠、冒号、逗号和分号
    if(email=="")
    {
        return false; //如果email字段的内容为空，则结果为false
    }
    for(var k=0;k<invalidChars.length;k++)
    {
        var bedchar= invalidChars.charAt(k);
        if(email.indexOf(bedchar) >-1) //检验输入中是否包含无效字符
        {
            return false;
        }   
    }
    var atPos=email.indexOf("@",1); //从地址的第二个字符开始检查第一个“@”符号
    if(atPos == -1)
    {
        return false;
    }
    if(email.indexOf("@",atPos+1) !=-1) //检查后面的地址中是否还包含“@”符号
    {
        return false;
    }
    var periodPos=email.indexOf(".",atPos); //检查“@”符号后面是否还有“.”
    if(periodPos == -1)
    {
        return false;
    }
    if(periodPos+3 >email.length) //要求“.”号后面还有两个字符
    {
        return false;
    }
    return true;
}