表单校验

       涉及到前端的开发,无论是动态网站还是其他的B/S结构的系统,都离不开表单.

       表单作为客户端向服务器端提交的数据的主要载体，如果提交的数据不合法，将会引出各种各样的问题，今天就来学习如何避免这样的问题.

       1.学习表单校验前,先要了解什么是客户端验证和服务端验证.

           客户端验证:实际上就是已下载页面中,当用户提交表单的时候,直接在当前页面中调用脚本来进行的验证。(减少服务器端的运算)

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

       2.表单验证的思路

           ①.使用string对象验证邮箱:

               a.先获取表单元素(Email文本框)的值(string类型)，然后进行判断;

               b.使用jQuery ID选择器获取表单的输入元素(文本框对象),然后使用jQuery的val()方法获取文本框的值;

               c.使用字符串方法(indexOf())来判断获得的文本框元素的值是否包含"@"和".";

               d.Email地址的有效性验证发生在单击"注册"按钮之后,所以该事件在提交表单时产生(表单form有一个事件onsubmit),这时可以使用提交按钮来触发onsubmit事件,也可以使用jQuery

                  封装的事件方法submit().

               代码:

<script type="text/javascript">
        //创建登录按钮的点击事件,当我点击按钮时,提交表单
            function check(){
                //获取到email框的值进行非空验证
                var email = $('#email').val();
                if (email=='') {
                    alert('邮箱不能为空');
                    return false;
                };
                //进行格式验证
                if(email.indexOf('@')==-1){
                    alert('邮箱格式不正确,必须有@')
                    return false;
                };
                if (email.indexOf('.')==-1){
                    alert('邮箱格式不正确,必须有.')
                    return false;
                };
            }
            
            $(function(){
                //将登录按钮设置为提交类型,提交的是表单中有name属性的表单数据
                //myform由登录按钮触发,
                $('#myform').submit(function(){
                    return check();
                })
            });
        </script>