JQuery攻略（五）表单验证

表单验证，字段空白，输入合法，数据合法.......

此章节有

1.1字段验证

1.字段非空

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function () {//提交按钮点击

        var data = $(".infobox").val();

        var len = data.length;

        if (len < 1) {

            $(".error").show(); //显示错误提示文本

        } else {

            $(".error").hide();

        }

    });

});

2.验证数字

1.方法一，挨个遍历

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function (event) {//提交按钮点击

        var data = $(".infobox").val();

        var len = data.length;

        var c;

        for (var i = 0; i < len; i++) { //挨个遍历

            c = data.charAt(i).charCodeAt(0);

            if (c < 48 || c > 57) {

                $(".error").show(); //显示错误提示文本

                event.preventDefault(); //取消事件的默认动作。阻止提交

                break;

            } else {

                $(".error").hide();

            }

        }

    });

});

charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法.方法返回指定索引位置的char值。索引范围为0~length()-1.

charCodeAt(int index) 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

　　　　　　　　charAt()与charCodeAt() 方法执行的操作相似，只不过前者返回的是字符子串，而后者返回的是位于指定位置的字符的编码。

2.方法二，利用方法isNaN()

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function (event) {//提交按钮点击

        var data = $(".infobox").val();

        if (isNaN(data)) {

            $(".error").show(); //显示错误提示文本

            event.preventDefault(); //取消事件的默认动作。阻止提交

        } else {

            $(".error").hide();

        }

    });

});

isNaN(x) 函数用于检查其参数是否是非数字值。参数x，必需。要检测的值。

如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。

提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。

3.方法三，正则表达式

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function (event) {//提交按钮点击

        var data = $(".infobox").val();

        var isNum = /^([0-9]*)$/; //正则表达式

        if (isNum.test(data)) {

            $(".error").hide();

        } else {

            $(".error").show(); //显示错误提示文本

            event.preventDefault(); //取消事件的默认动作。阻止提交

        }

    });

});

4.方法四，利用键盘事件只能输入数字

    $(".infobox").keyup(function () {

        this.value = this.value.replace(/[^0-9]/i, "");

    });

利用正则判断非数字，替换删除。/[^0-9]/i执行对大小写不敏感的匹配

1.2正则表达式验证

验证电话号码

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function (event) {//提交按钮点击

        var data = $(".infobox").val();

        var isNum = /^([0-9]*)$/; //正则表达式

        if (validate_phoneNo(data)) {

            $(".error").hide();

        } else {

            $(".error").show(); //显示错误提示文本

            event.preventDefault(); //取消事件的默认动作。阻止提交

        }

    });

    function validate_phoneNo(ph) {

        var patten = new RegExp(/^[0-9-+]+$/); //正则

        return patten.test(ph);

    }

});

正则表达式： /^[0-9-+]+$/ ：^符号开头，$结束；[0-9-+]+ 后面的+号表示[0-9-+]可以重复1次或多次。

正则表达式：/^[a-z0-9_]+$/i 验证字母数字下划线组成的字符串，且不区别大小写。

正则表达式：/\b\d{2,4}[\/-]\d{1,2}[\/-]\d{1,2}\b/

\b:表示边界，正则的开头和结尾，必须与模式完全匹配

\d{2,4} 表示出现2位或4位数字

[\ /-] 表示出现符号 /或-

这段可匹配 2014/07/07 or 14-7-7 等等。。。。

正则表达式：/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/ 用来验证邮箱

\w 表示字母数字下划线

(\.[\w-]+) 表示由.后面跟着1个或多个的数字字母下划线或-符号

* 表示(\.[\w-]+)出现0次或多次

另一个邮箱验证 /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/

1.3复选框的勾选

<body>

    <form id="signup" method="post">

    <input type="checkbox" id="pizza" name="pizza" value="5" class="infobox" />

    <label for="pizza">Pizza $5</label><br />

    <input type="checkbox" id="hotdog" name="hotdog" value="2" class="infobox" />

    <label for="hotdog">Hotdog $2</label><br />

    <input type="checkbox" id="coke" name="coke" value="1" class="infobox" />

    <label for="coke">Coke $1</label><br />

    <input type="checkbox" id="fries" name="fries" value="3" class="infobox" />

    <label for="fries">Fries $3</label><br />

    <p class="error">

        Select at least one checkbox</p>

    <p class="result">

    </p>

    <input type="button" class="submit" value="Submit" />

    </form>

</body>

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function (event) {//提交按钮点击

        var count = 0;

        $("form").find(":checkbox").each(function () { //查找所有复选框，遍历

            if ($(this).is(":checked")) { //是否选中

                count = count + parseInt(this.value);

            }

        });

        if (count == 0) {

            $("p.result").hide();

            $(".error").show();

        } else {

            $(".error").hide();

            $(".result").show().text("You bill is $" + count);

        }

        event.preventDefault();

    });

});

改进，先判断是否有复选框被勾选，有！再遍历！

$(document).ready(function () {

    $(".error").hide(); //隐藏报错信息

    $(".submit").click(function (event) {//提交按钮点击

        var count = 0;

        if ($("input:checked").length == 0) { //是否有勾选狂被勾选

            $("p.result").hide();

            $(".error").show();

        } else {

            $("form").find(":checkbox").each(function () { //查找所有复选框，遍历

                if ($(this).is(":checked")) { //是否选中

                    count = count + parseInt(this.value);

                }

            });

            $(".error").hide();

            $(".result").show().text("You bill is $" + count);

        }

        event.preventDefault();

    });

});

全选与取消

html

<body>

    <form id="signup" method="post">

    <input type="checkbox" id="checkall" name="checkall" value="5" class="infobox" />

    <label for="checkall">Check/Uncheck All</label><br />

    <input type="checkbox" id="pizza" name="check" value="5" class="infobox" />

    <label for="pizza">Pizza $5</label><br />

    <input type="checkbox" id="hotdog" name="check" value="2" class="infobox" />

    <label for="hotdog">Hotdog $2</label><br />

    <input type="checkbox" id="coke" name="check" value="1" class="infobox" />

    <label for="coke">Coke $1</label><br />

    <input type="checkbox" id="fries" name="check" value="3" class="infobox" />

    <label for="fries">Fries $3</label><br />

    <p class="error">

        Select at least one checkbox</p>

    <p class="result">

    </p>

    <input type="button" class="submit" value="Submit" />

    </form>

</body>

    $("#checkall").click(function (event) {

        var flag = this.checked;

        $("input[name=check]").each(function (i) {

            $(this).attr("checked", flag);

        });

    });

//$(this).parent().find(".error").show();

next()方法返回的每个元素的下一个兄弟元素，next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

而不是想nextAll()方法那样，返回所有的下一个兄弟元素。

jQuery系列链接汇总

JQuery攻略（一）基础知识——选择器与 DOM

JQuery攻略（二） Jquery手册

JQuery攻略（三）数组与字符串

JQuery攻略（四）事件