涉及到前端的开发,无论是动态网站还是其他的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>