表单校验

表单验证的必要性:

使用JavaScript可以十分便捷的进行表单验证,他不但能检查用户输入的无效或错误数据,还能检查用户遗漏的必选项,

从而减轻服务器端的压力,避免服务器端的信息出现错误。

客户端验证:

在已下载的页面中,当用户提交表单的时候,他直接在页面中调用脚本来进行验证,这样可以减少服务器端的运算。

服务器端验证:

将页面提交到服务器,由服务器端的程序对提交的表单进行验证,然后再返回响应结果到客户端。

验证表单的合法性:

1>首先获取表单元素的值,这些值一般都是String类型,包含数字,下划线等。

2>使用JavaScript中的一些方法对获取的String类型的数据进行判断。

3>表单form有一个事件onsubmit,他是在提交表单之前调用的,因此可以在提交表单时出发onsubmit事件,然后对获取的数据进行验证。

检验邮箱中是否含有@和.

 function checkEmail(){
        var flag=true;
        var dom = $("[id=email]");
        var value = dom.val();
        if (value.indexOf("@")==-1) {
            alert('邮箱中必须包含@');
            flag = false;
        }
        if (value.indexOf(".") == -1) {
            alert('邮箱中必须包含.');
            flag = false;
        }
        return flag;
        }
        $(function () {
            var myform = $("form");
            myform.submit(function () {
                return checkEmail();
            });
        });

换对焦后:

  function checkEmail(num) {
            var email = $("[id=email]").val().length;
            if (email<6) {
                $("#semail").text("邮箱不合格");
                num = 1;
            } else {
                $("#semail").text("√");
            }
            return num;
        }
        function checkPwd(num) {
            var pwd = $("[id=pwd]").val().length;
            if (pwd<6) {
                $("#spwd").text("密码不合格");
                num = 1;
            } else {
                $("#spwd").text("√");
            }
            return num;
        }
        $(function () {
            $("[id=email]").blur(function () {
                checkEmail();
            });
        });
        $(function () {
            $("form").submit(function () {
                var num1 = checkEmail(0);
                var num2 = checkPwd(0);
                var sum = num1 + num2;
                if (sum > 0) {
                    return false;
                }
                return true;
            });
        });


事件:

onblur:失去焦点后,当光标离开某个文本框后时触发。

onfocus:获得焦点后,当光标进入文本框后时触发。

方法:

blur():从文本域移开焦点。

focus():在文本域中设置焦点,即获得鼠标光标。

select():选取文本域中的内容,突出显示输入区域的内容。

正则表达式:

正则表达式是一个描述字符模式的对象,他是由一些特殊的符号组成的,这些符号和在SQLServer中学过的通配符一样,其

组成的字符模式用来匹配各种表达式。

语法:

var reg=/表达式/附加参数

表达式:一个字符串代表了某种规则,其中可以使用某些特殊字符来代表特殊的规则。

附加参数:

g:代表可以进行全局匹配

i:代表不区分大小写匹配

m:代表可以进行多行分配

构造函数:

var reg=new RegExp(“表达式“,”附加参数”);

模式:

简单模式:通过普通字符的组合来表达的模式

符合模式:含有通配符来表达的模式


test()方法用于检测一个字符串是否匹配某个模式

语法:

正则表达式对象实例.test(字符串)

表单选择器:

用来选择文本输入框。


Jquery表单过滤选择器

表单对象属性过滤选择器

选择器                 描述                                              返回                示例

:enabled              选择所有可用元素                          集合元素         $("#form1  :enabled");选取ID为"form1"的表单内的所有可用元素

:disabled             选取所有不可用元素                       集合元素         $(#form2   :disabled);选取id为"from2"的表单内的所有不可用元素

:checked             选取所有被选中的元素                   集合元素         $("input:checked")选取所有被选中的元素

:selected            选取所有被选中的选项元素(下拉)集合元素        $("select:selected");选取所有被选中的选项元素


表单对象属性过滤示例

选择器材             描述                                                 返回                示例

:input                    选取所有的,