第六篇 章JavaScript表单验证 JavaScript及网页特效制作课件.pptVIP

JavaScript与网页特效制作 第六章 JavaScript表单验证 本章案例 字符串验证 数字验证 email验证 本章目标 了解客户端验证的优点 掌握基本的字符串验证 掌握基本的数字验证 掌握常用的正则表达式验证 预习检查 提问 客户端验证的优点是什么？ 如何验证字符串是否为空？ 如何验证一个值是否为数字类型？ Email正则表达式如何书写？ 客户端验证 优点: 当用户输入错误数据时，页面不需要重新加载，可以保持用户输入的数据状态，所以不要要再一次输入所有数据，只输入错误数据即可。 减轻了服务器端通信压力，因为发生错误的时候并没有数据往返到服务器端。 使得用户界面响应更加迅速，因为可以立刻为用户提供反馈信息。 缺点： JavaScript不能作为唯一的验证方法(JavaScript可能不可用，甚至可能被故意关闭以阻止进行验证)。 这可能会产生这样一个错觉，验证输入数据是非常简单的过程。其实不是这样，而且它对产品的安全性和可用性都是非常关键的。 除非在客户端和服务器端使用了相同的验证规则，否则就意味着当验证规则发生一处变化的时候，需要进行两次维护。 字符串基本验证 验证一个字符串是否为空。 function validate() { var text =document.getElementById(text).value; if (text == null || text == ) { alert(请输入一个字符串！); } else { alert(你输入的字符串是： + text); } } 判断字符串是否为空 演示程序示例1.html 字符串基本验证 在表单提交时验证文本框中输入的值是否为数字。 分析 如果字符串中包含有负号，则必须在第一位。 如果字符串中包含有小数点，则只能有一个。 每一位字符的ASCII码所在范围均为48并且57并且不等于45及46。 字符串基本验证 if (num == null || num == ) { alert(请输入一个字符串!); return false; } //验证字符串中若包含负号，是否在首位 if (num.indexOf(-) != -1 num.substr(0, 1) || num.lastIndexOf(-) != num.indexOf(-)) { alert(负号只可以出现在数字的第一位！);return false; } //验证字符串中若包含小数点，是否仅有一个且不在首尾 if (num.indexOf(.) != -1 num.indexOf(.) != num.lastIndexOf(.)) { alert(数字中只能有一个小数点！);return false; } 验证负号 验证小数点 字符串基本验证 for (i = 0; i num.length; i++) { currentCode = num.charCodeAt(i);//截取一个字符的ASCII if (currentCode != 45 currentCode != 46 currentCode 48 || currentCode 57) { alert(只允许输入数字！); return false; } } return true;//提交表单 循环遍历每一个字符 验证每一个字符是否为数字 停止表单提交 演示程序示例2.html 数字验证 Number() ：将括号内的值转换为数字。 isNaN(n) ：检验n是否为数字(整数或者浮点型)。 parseInt() ：将字符串转换为整数(只转换从左侧第一位开始的数字值，非数字值不做转换，若第一位既为非数字值，返回NaN)。 parsetFloat() ：将字符串转换为浮点数(转换方式与parseInt类似)。 数字验证 使用数字验证方法验证一个字符串是否为数字。 分析 使用isNaN()方法进行验证。 方法返回值为true则是数字。 数字验证 function validate() { var num = document.getElementById(number); if (isNaN(num)) { alert(你输入的不是数字！); return false; } return true; } 判断是否为数字 演示程序示例3.html 课堂练习 使用字符串常用方法验证一个字符串是否为邮件格式。 正则表达式 正则表达式是用于描述复杂规则的工具。是记录文本规则的代码。 正则表达式类似于通配符“*”和“?”，都是用来进行文本匹配，但是正则表达式可以匹配更为复杂的文本。 正则表达式入门 正则表达式的定义方式： 假设：想要从字符串中