表单校验

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

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

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

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

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

       2.表单验证的思路

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

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

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

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

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

                  封装的事件方法submit().

               代码:

 1 <script type="text/javascript">

 2         //创建登录按钮的点击事件,当我点击按钮时,提交表单

 3             function check(){

 4                 //获取到email框的值进行非空验证

 5                 var email = $('#email').val();

 6                 if (email=='') {

 7                     alert('邮箱不能为空');

 8                     return false;

 9                 };

10                 //进行格式验证

11                 if(email.indexOf('@')==-1){

12                     alert('邮箱格式不正确,必须有@')

13                     return false;

14                 };

15                 if (email.indexOf('.')==-1){

16                     alert('邮箱格式不正确,必须有.')

17                     return false;

18                 };

19             }

20             

21             $(function(){

22                 //将登录按钮设置为提交类型,提交的是表单中有name属性的表单数据

23                 //myform由登录按钮触发,

24                 $('#myform').submit(function(){

25                     return check();

26                 })

27             });

28         </script>

表单校验