Java Web程序开发范例宝典
上QQ阅读APP看书,第一时间看更新

3.2 数据验证

在动态网站中,为了确保用户输入信息的有效性及准确性,必须对用户输入的数据加以验证,保证数据的准确及安全。

实例060 验证输入的日期格式是否正确

本实例是一个提高录入准确性的程序

实例位置:光盘\mingrisoft\03\060

实例说明

为了确保用户输入的信息的有效性,应该检查用户输入信息的合法性。在客户端应用JavaScript判断输入信息的合法性可以提高程序的执行速度。例如,本例在提交表单执行查询语句之前,先判断输入的日期是否合法,就可以减少服务器的工作量。运行本实例,在“从”字后面的文本框中输入“2009-02-29”,在“到”字后面的文本框中输入“2009-03-31”后,单击“查询”按钮,将弹出图3.4所示的对话框,原因是2009年的2月份没有29日。

图3.4 验证输入的日期格式是否正确

技术要点

应用JavaScript编写验证输入的日期格式是否是正确的代码时,需要注意以下几点。

(1)首先需要从输入的字符串中提取出年份、月份和日,并判断输入的年份、月份和日是否是大于0的数字,并且将月份和日中小于10的数字格式化成长度为2的字符串(在其前面填充“0”)。

(2)将提取并格式化后的年份、月份和日重新组合,使其组合成为“YYYY-MM-DD”格式的字符串,并判断新组合后的字符串的长度是否为10。

(3)判断输入的年份是否为闰年,继而判断2月份的天数。

说明:闰年的条件是能被4整除,但不能被100整除或者能被400整除。

(4)根据1、3、5、7、8、10、12月份为31天,其他月份为30天的原则判断除2月份以外的月份的日是否正确。

(5)判断月份是否大于12。

实现过程

(1)应用JavaScript编写验证输入的日期格式是否正确的函数CheckDate(),该函数只有一个参数INDate,用于指定要判断的日期字符串,返回值为true或false,将CheckDate()函数保存在一个单独的JS文件function.js中。代码如下:

            function CheckDate(INDate){
              if(INDate=="")                                //如果输入日期为空
            {return true;}
              subYY=INDate.substr(0,4)                          //截取输入日期的前4位
              if(isNaN(subYY)||subYY<=0){                       //如果输入的不是数字或者是负数
                return true;
              }
              //转换月份,从输入数字的第0位开始查找,判断是否有字符串"-",如果有将separate的值设置为"-"
              if(INDate.indexOf('-',0)!=-1){    separate="-"}
              else{
                if(INDate.indexOf('/',0)!=-1){separate="/"}     //如果没有字符串"-",那么将separate的值设置为"/"
                else{return true;}                               //如果以上两者均查询不到,则返回true
                }
                area=INDate.indexOf(separate,0)                 //从字符串的第一个位置开始查找,返回特定字符的位置
                subMM=INDate.substr(area+1,INDate.indexOf(separate,area+1)-(area+1))
                if(isNaN(subMM) || subMM<=0){
                return true;
              }
                if(subMM.length<2){subMM="0"+subMM}             //如果月份只有1位,那么在它的前面加"0"
              //转换日
              area=INDate.lastIndexOf(separate)                 //从字符串的最后一位开始查找,返回特定字符的位置
              subDD=INDate.substr(area+1,INDate.length-area-1)
              if(isNaN(subDD) || subDD<=0){
                return true;
              }
              if(eval(subDD)<10){subDD="0"+eval(subDD)}         //对作为数字表达式的字符串求值
              NewDate=subYY+"-"+subMM+"-"+subDD
              if(NewDate.length!=10){return true;}               //如果输入日期的长度小于10
            if(NewDate.substr(4,1)!="-"){return true;}           //如果输入日期的第5位不是"-"
            if(NewDate.substr(7,1)!="-"){return true;}           //如果输入日期的第8位不是"-"
              var MM=NewDate.substr(5,2);                        //从第5位开始截取字符串,截取2位,即获得月份
              var DD=NewDate.substr(8,2);                        //从第8位开始截取字符串,截取2位,即获得日
              //判断是否为闰年(能被4整除并且不能被100整除或者只能被400整除的年份就为闰年)
              if((subYY%4==0&&subYY%100!=0)||subYY%400==0){            //判断是否为闰年
                if(parseInt(MM)==2){                                   //将MM转化为整数
                    if(DD>29){return true;}
                }
              }else{
                if(parseInt(MM)==2){
                    if(DD>28){return true;}
                }
              }
              var mm=new Array(1,3,5,7,8,10,12);                         //判断每月中的最大天数
              for(i=0;i< mm.length;i++){
                if(parseInt(MM)==mm[i]){                               //判断月份是否为数组中的值
                    if(parseInt(DD)>31){
                        return true;
                    }else{
                        return false;
                    }
                }
              }
            if(parseInt(DD)>30){return true;}
            if(parseInt(MM)>12){return true;}                           //如果月份大于12
            return false;                                               //如果以上情况都不是则返回false
          }

(2)在需要验证输入日期的页面中包含function.js文件,代码如下:

          <script src="function.js"></script>

(3)编写自定义的JavaScript函数check(),用于在提交表单前判断用户输入是否合法,在该函数中再调用CheckDate()函数判断输入的日期是否正确,如果不正确则给予提示,否则提交表单,关键代码如下:

          <script language="javascript">
          function check(myform){
              if(myform.sDate.value==""){
              alert("请输入开始日期");myform.sDate.focus();return;
              }
              if(CheckDate(myform.sDate.value)){
              alert("您输入的开始日期不正确(如:1980/07/17或1980-07-17)\n请注意闰年!");myform.sDate.focus();return;
              }
            if(myform.eDate.value==""){
            alert("请输入结止日期");myform.eDate.focus();return;
            }
            if(CheckDate(myform.eDate.value)){
            alert("您输入的结止日期不正确(如:1980/07/17或1980-07-17)\n请注意闰年!");myform.eDate.focus();return;
            }
            myform.submit();
              }
              </script>

举一反三

根据本实例,读者可以:

在会员或用户注册页面中,判断输入的生日是否正确;

在日期型数据查询时,判断输入的日期是否正确。

实例061 检查表单元素是否为空

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\061

实例说明

在开发动态网站时,经常会遇到要求数据表中所有字段均不为空的情况,这就要求程序员在开发网站时,对用户输入的空数据加以判断,也就是要求表单中全部输入均不允许为空。遇到这种情况也许您会采用对每个输入框进行逐一判断的方法,这样做会很麻烦。在本实例中将介绍一个简单、快捷的方法:利用循环语句进行判断。运行本实例,单击“提交”按钮时,将弹出图3.5所示的对话框。

图3.5 检查表单元素是否为空

技术要点

要检查表单元素是否为空主要是通过For循环语句和form对象的相关属性进行判断的。下面详细介绍form对象的常用属性。

创建form对象的语法如下:

        <FORM ACTION="url" METHOD="GET|POST" NAME="formname" TARGET="target"></FORM>

Form对象的常用属性如下。

● name:Form对象的名字。

● method:用于定义表单结果从浏览器传送到服务器的方法,一般有两种方法:GET和POST。

● action:用来定义表单处理程序的目标地址(相对地址或绝对地址,一般为相对地址)。

● target:设置表单提交后,显示处理结果的窗口。

● length:表单中表单元素的个数。

● elements:包含表单中所有表单元素的数组。

说明:在JavaScript中form表单的elements属性的value属性代表指定表单元素的值;name属性代表指定表单元素的名称。

实现过程

(1)应用JavaScript编写检查表单元素是否为空的函数check (),该函数只有一个参数Form,用于指定要进行检查的表单对象,无返回值。将函数check ()保存在function.js文件中。代码如下:

          function check(Form){
              for(i=0;i<Form.length;i++){
                if(Form.elements[i].value==""){        //Form的属性elements的首字e要小写
                    alert(Form.elements[i].title + "不能为空!");
                    Form.elements[i].focus();             //指定表单元素获取焦点
                    return;
                }
              }
              Form.submit();                                  //提交表单
          }

(2)在需要验证表单元素的页面中包含function.js文件,代码如下:

          <script src="function.js"></script>

(3)在页面中添加所需的表单及表单元素,在“提交”按钮的onClick事件中调用check()函数判断表单元素是否为空,注意一定要将当前表单作为参数传递到check()函数中。关键代码如下:

          <form name="form1" method="post" action="">
              留 言 人:<input type="text"name="mname"size="20"title="留言人">
              留言主题:<input type="text" name="mtext" size="66" title="留言主题">
              留言内容:<textarea name="mnote" cols="64" rows="10" class="wenbenkuang" title="留言内容"></textarea>
              <input name="Button" type="button" class="btn_grey" value="提交" onClick="check(form1)">
              <input name="Submit2" type="reset" class="btn_grey" value="重置">
          </form>

举一反三

根据本实例,读者可以:

开发在线论坛或留言簿中的添加留言信息模块;

开发网站后管理模块中的信息添加和修改模块;

开发用户或会员注册模块。

实例062 验证E-mail是否正确

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\062

实例说明

在数据录入页面中,经常需要对输入的E-mail地址进行判断,在JSP中判断E-mail地址是否正确有两种方法:分别是服务器端验证和客户端验证。本实例应用的是客户端验证。运行本实例,在E-mail文本框中输入E-mail地址“wgh717@sohu”,单击“注册”按钮,将弹出图3.6所示的对话框,提示您输入的E-mail地址不正确。

图3.6 客户端验证E-mail是否正确

技术要点

客户端数据验证是指在客户机上,通过触发事件机制和浏览器执行脚本解释共同完成验证数据的过程。客户端数据验证采用的语言包括JavaScript和VBScript。客户端数据验证速度快,同时也能减少客户端对服务器的请求次数。在客户端验证E-mail是否合法,也可以通过正则表达式实现。验证E-mail地址的正则表达式如下:

        /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/

在JavaScript中使用正则表达式主要是通过正则表达式对象实现的,使用正则表达式对象的语法格式如下:

语法1:

        re = /pattern/[flags]

语法2:

        re = new RegExp("pattern",["flags"])

功能:本对象包含正则表达式模式以及表明如何应用模式的标志。

参数说明:

● re:必选项。要赋值为正则表达式模式的变量名。

● pattern:必选项。要使用的正则表达式模式。如果使用语法1,用“/”字符分隔模式,如果用语法2,用引号将模式引起来。

● flags:可选项。用于指定匹配标志,如果使用语法2要用引号将flag引起来。标志可以组合使用,常用的标记有g(全文查找出现的所有pattern)、i(忽略大小写)、m(多行查找)。

使用test方法rgexp.test(str)可以返回一个Boolean值,它指出在被查找的字符串中是否存在模式。

注意:在JavaScript中调用正则表达式时,正则表达式以正斜线“/”开头和结尾。

实现过程

(1)使用JavaScript编写一个用于检测E-mail地址是否正确的函数checkemail(),该函数只有一个参数email,用于获取输入的E-amil地址,返回值为true或false。代码如下:

          <script language="javascript">
          function checkemail(email){
              var str=email;
        //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
              var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
              var objExp=new RegExp(Expression);          //创建正则表达式对象
              if(objExp.test(str)==true){               //通过正则表达式进行验证
                return true;
              }else{
                return false;
              }
          }
          </script>

(2)调用checkemail()函数判断E-mail地址是否正确,并显示相应的提示信息。关键代码如下:

          <script language="javascript">
          function check(myform){
              if(myform.e_mail.value==""){
              alert("请输入Email地址!");myform.e_mail.focus();return;
              }
              if(!checkemail(myform.e_mail.value)){
              alert("您输入Email地址不正确!");myform.e_mail.focus();return;
              }
              myform.submit();
          }
          </script>

举一反三

根据本实例,读者可以:

开发用户注册模块中判断E-mail格式是否正确;

开发在线订单模块中判断E-mail格式是否正确。

实例063 通过正则表达式验证电话号码

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\063

实例说明

在网络应用程序的数据录入页面中,经常需要对输入的电话号码进行判断,在JSP中判断电话号码可以通过正则表达式实现。运行本实例,在“联系电话”文本框中输入联系电话号码“556677”,单击“注册”按钮,将返回图3.7所示的页面,提示您输入的电话号码不正确。

图3.7 通过正则表达式验证电话号码

技术要点

想要通过正则表达式验证电话号码,就应该了解电话号码的规则。通常的电话号码的格式分为以下3种:第一种区号是3位数字,其他是8位数字;第2种区号是4位数字,其他是7位数字;第3种区号是4位数字,其他是8位数字。根据以上规则,可以得出以下验证电话号码的正则表达式。

        /^(\d{3}-)(\d{8})$|^(\d{4}-)(\d{7})$|^(\d{4}-)(\d{8})$/

实现过程

(1)使用JavaScript编写一个用于检测电话号码是否正确的函数checktel(),该函数只有一个参数tel,用于获取输入的电话号码,返回值为true或false。代码如下:

        <script language="javascript">
            function checktel(tel){
                var str=tel;
                    //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
                var Expression=/^(\d{3}-)(\d{8})$|^(\d{4}-)(\d{7})$|^(\d{4}-)(\d{8})$/;
                var objExp=new RegExp(Expression);            //创建正则表达式对象
                if(objExp.test(str)==true){                 //通过正则表达式验证
                    return true;
                }else{
                    return false;
                }
            }
        </script>

(2)调用checktel()函数判断电话号码是否正确,并显示相应的提示信息。关键代码如下:

        <script language="javascript">
            function check(myform){
              if(myform.tel.value==""){
                    alert("请输入联系电话!");myform.tel.focus();return false;
              }
              if(!checktel(myform.tel.value)){
                    alert("您输入的联系电话不正确!");myform.tel.focus();return false;
              }
            }
        </script>

举一反三

根据本实例,读者可以:

实现用户注册模块中的用户电话号码的判断;

实现在企业客户管理系统中添加客户信息时判断联系电话。

实例064 验证输入的字符串是否为汉字

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\064

实例说明

在动态网站的数据录入页面中,经常需要对用户输入的真实姓名进行判断,例如某网站要求输入的真实姓名为汉字,所以如果用户输入的内容不为汉字将被视为不合法。本实例中的真实姓名被限制为只能输入汉字。运行本实例,在“真实姓名”文本框中输入“wgh”后,单击“注册”按钮,将弹出图3.8所示的对话框,提示您输入的真实姓名不正确。

图3.8 验证输入的字符串是否为汉字

技术要点

实现验证输入的字符串是否为汉字的方法有很多种,例如可以通过正则表达式进行判断,也可以根据字符的ASCII码进行判断,其中应用正则表达式判断比较方便、快捷。验证输入的字符串是否为汉字的正则表达式如下:

          /[^\u4E00-\u9FA5]/

说明:关于在JavaScript中调用正则表达式的详细介绍请参考实例062。

实现过程

(1)使用JavaScript编写一个用于检测用户输入的真实姓名是否为汉字的函数checkrealname(),该函数只有一个参数realname,用于获取输入的真实姓名,返回值为true或false。代码如下:

          <script language="javascript">
          function checkrealname(realname){
              var str=realname;
        //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
              var Expression=/[^\u4E00-\u9FA5]/;
              var objExp=new RegExp(Expression);          //创建正则表达式对象
              if(objExp.test(str)==true){               //通过正则表达式验证
                return true;
              }else{
                return false;
              }
          }
          </script>

(2)调用checkrealname()函数判断用户输入的真实姓名是否为汉字,并显示相应的提示信息。关键代码如下:

          <script language="javascript">
          function check(myform){
        if(myform.realname.value==""){
        alert("请输入真实姓名!");myform.realname.focus();return;
        }
        if(checkrealname(myform.realname.value)){
        alert("您输入真实姓名不正确!");myform.realname.focus();return;
        }
        myform.submit();
          }
          </script>

举一反三

根据本实例,读者可以:

限制在线订单中的联系人的姓名必须为汉字;

限制进销存管理系统中的经手人、联系人字段必须为汉字。

实例065 验证身份证号码

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\065

实例说明

在动态网站的会员注册页面中,经常需要对用户输入的身份证号码进行判断,因此笔者编写了一个验证身份证号码的函数,在需要时进行调用即可。例如本例就应用了该函数,运行本实例,在“身份证号码”文本框中输入“220104111111”后,单击“注册”按钮,将弹出图3.9所示的对话框,提示您输入的身份证号码不正确。

图3.9 验证身份证号码

技术要点

要验证身份证号码首先需要了解身份证号码的编码规则,现在有效的身份证有两种编码规则,分别是15位居民身份证号码和18位居民身份证号码,下面分别给出这两种编码规则。

15位的居民身份证的号码为:

        aa bb cc yymmdd nnn

其中,aa代表省份编码,bb代表省地区编码,cc代表地级县(市)编码,yymmdd代表出生年月日,其中yy用年份的后两位表示;nnn代表同一地区出生年月日相同的人的序号,该序号以户主为准,子女依照户主序号确定,奇数=男,偶数=女,且女=男+1。

18位的居民身份证号码为:

        aa bb cc yyyymmdd nnn r

其中aa bb cc所代表的含义与15位的相同,yyyymmdd代表出生年月日,年份为4位;nnn代表同一地区出生年月日相同的人的序号;r为校验位,数字是1至10,因为不能用10(否则就成了19位数),所以用X代表10。

实现验证身份证号码的正则表达式如下:

        /\d{17}[\d|X]|\d{15}/

说明:关于在JavaScript中调用正则表达式的详细介绍请参考实例062。

实现过程

(1)使用JavaScript编写一个用于验证身份证号码是否合法的函数checkeNO(),该函数只有一个参数NO,用于获取输入的身份证号码,返回值为true或false。代码如下:

              <script language="javascript">
              function checkeNO(NO){
                var str=NO;
                //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
                var Expression=/^\d{15}$|^\d{18}$|^\d{17}(\d|X|x)$/;
              var objExp=new RegExp(Expression);          //创建正则表达式对象
              if(objExp.test(str)==true){               //通过正则表达式验证
                return true;
              }else{
                return false;
              }
          }
          </script>

(2)调用checkNO()函数判断用户输入的身份证号码是否合法,如果不合法,将提示用户输入的身份证号码不正确,关键代码如下:

          <script language="javascript">
          function check(myform){
              if(myform.number.value==""){
              alert("请输入身份证号码!");myform.number.focus();return;
              }
              if(!checkeNO(myform.number.value)){
              alert("您输入身份证号码不正确!");myform.number.focus();return;
              }
              myform.submit();
          }
          </script>

举一反三

根据本实例,读者可以:

在办公自动化管理系统中判断员工的身份证号码是否合法;

根据正确的身份证号码自动计算员工的年龄及出生日期。

实例066 客户端验证用户名和密码

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\066

实例说明

在动态网站的用户注册页面中,经常需要对用户输入的用户名和密码的位数及成员组成进行判断,这样可以规范用户的注册信息。例如本实例,要求用户名由3~10位的字母、数字和下划线组成,密码由6~20位的字母、数字、下划线和点“.”组成并且首字符为字母,这时就需要对用户的输入进行判断,因此笔者编写了两个函数,分别用于验证用户输入的用户名和密码是否合法。运行本实例,在“用户名”文本框中输入“ax帮”后,单击“注册”按钮,将弹出图3.10所示的对话框,提示您输入的用户名不合法。

图3.10 客户端验证用户名和密码

技术要点

验证用户名是否由3~10位的字母、数字和下划线组成的正则表达式如下:

        /^(\w){3,10}$/

验证密码是否由6-20位的字母、数字、下划线和点“.”组成的正则表达式如下:

        /^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$/

说明:关于在JavaScript中调用正则表达式的详细介绍请参考实例69。

实现过程

(1)使用JavaScript编写一个用于验证用户名是否合法的函数checkeusername (),该函数只有一个参数username,用于获取输入的用户名,返回值为true或false。代码如下:

        <script language="javascript">
        function checkeusername(username){
            var str=username;
                //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
            var Expression=/^(\w){3,10}$/;
            var objExp=new RegExp(Expression);          //创建正则表达式对象
            if(objExp.test(str)==true){               //通过正则表达式验证
                return true;
            }else{
                return false;
            }
        }
        </script>

(2)使用JavaScript编写一个用于验证密码是否合法的函数checkePWD(),该函数只有一个参数PWD,用于获取输入的密码,返回值为true或false。代码如下:

        <script language="javascript">
        function checkePWD(PWD){
            var str=PWD;
                //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
            var Expression=/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$/;
            var objExp=new RegExp(Expression);          //创建正则表达式对象
            if(objExp.test(str)==true){               //通过正则表达式验证
                return true;
            }else{
                return false;
            }
        }
        </script>

(3)调用checkeusername()函数和checkePWD()函数分别判断用户输入的用户名和密码是否合法,如果不合法,将给予提示信息。关键代码如下:

        <script language="javascript">
        function check(myform){
            if(myform.username.value==""){
            alert("请输入用户名!");myform.username.focus();return;
            }
            if(!checkeusername(myform.username.value)){
            alert("您输入的用户名不合法!");myform.username.focus();return;
            }
            if(myform.PWD.value==""){
            alert("请输入密码!");myform.PWD.focus();return;
            }
            if(!checkePWD(myform.PWD.value)){
            alert("您输入的密码不合法!");myform.PWD.focus();return;
            }
            if(myform.PWD1.value==""){
            alert("请确认密码!");myform.PWD1.focus();return;
            }
            if(myform.PWD1.value!=myform.PWD.value){
            alert("您两次输入的密码不一致,请重新输入!");myform.PWD.focus();return;
            }
            myform.submit();
        }
        </script>

举一反三

根据本实例,读者可以:

判断用户输入的单据号码是否正确。

实例067 验证网址是否合法

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\067

实例说明

在动态网站的用户注册页面中,为了保证输入信息的有效性,经常需要对用户输入的网址进行判断,因此笔者编写了一个验证网址是否合法的函数。例如,本实例就要求对用户输入的个人主页地址进行判断。运行本实例,在“个人主页”文本框中输入“mingrisoft.com”后,单击“注册”按钮,将弹出图3.11所示的对话框,提示输入的个人主页地址不合法。

图3.11 验证输入的网址是否合法

技术要点

验证网址是否合法的正则表达式如下:

          http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

注意:由于在JavaScript中不能直接输出“/”字符,需要应用转义字符"\"输出一个字符“/”,因此转换后的正则表达式如下:

          /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/

说明:关于在JavaScript中调用正则表达式的详细介绍请参考实例062。

实现过程

(1)使用JavaScript编写一个用于验证网址是否合法的函数checkeurl (),该函数只有一个参数url,用于获取输入的网址,返回值为true或false。代码如下:

          <script language="javascript">
          function checkeurl(url){
              var str=url;
              //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
              //判断url地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
              //下面的代码中应用了转义字符"\"输出一个字符"/"
              var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
              var objExp=new RegExp(Expression);           //创建正则表达式对象
              if(objExp.test(str)==true){                //使用正则表达式进行验证
              return true;
              }else{
              return false;
              }
          }
          </script>

(2)调用checkeurl()函数判断用户输入的网址是否合法,如果不合法,将给予提示信息。关键代码如下:

        <script language="javascript">
        function checkuserinfo(){
            var homepage=userinfo.homepage.value;
            if(homepage==""){
            alert("请输入个人主页地址!");
            document.userinfo.homepage.focus();  return;
            }else{
            if(!checkeurl(homepage)){
                  alert("您输入的个人主页地址不合法!");
                  document.userinfo.homepage.focus();
                  return;
            }
            }
            userinfo.submit();
        }
        </script>

举一反三

根据本实例,读者可以:

过滤员工信息表中指定姓氏的员工信息;

验证用户输入的邮箱地址是否合法。

实例068 验证数量和金额

本实例是一个提高录入准确性的程序

实例位置:光盘\mingrisoft\03\068

实例说明

在动态网站开发时,经常会遇到限制用户输入数据的类型的问题。例如,“数量”文本框通常只能输入正整数,而“金额”文本框只能输入数值型数据,这就要求程序员在开发网站时,对用户输入的数值型数据进行判断。例如本实例的采购信息登录页面,就要求对单价和数量进行控制。运行本实例,在“单价”文本框中输入10.5,在“数量”文本框中输入“-1”时,系统将弹出图3.12所示的对话框,提示用户输入错误。

图3.12 验证数量和金额

技术要点

要验证输入的金额和数量(只能是正整数)是否合法首先需要知道它们各有何特点,下面分别说明。

金额:通常情况下,金额为数值型数据,包括小数,如10.5。

数量:通常情况下,数量一般为正整数,即只能由0到9之间的数字组成,如120。

根据上面的分析,可以总结出判断数量和金额的方法。

判断金额可以使用JavaScript的全局函数isNaN(),关键代码如下:

          isNaN(form1.dj.value)

判断数量可以使用正则表达式,其关键代码如下:

          str=form1.sl.value;
          var Expression=/^[1-9]+(\d*$)/;
          var objExp=new RegExp(Expression);
          if(objExp.test(str)==false){
            alert("您输入的不是有效值(请输入自然数)!");
          form1.sl.focus();form1.sl.select();return;
          }

实现过程

(1)应用JavaScript编写验证输入的单价(数值型数据)是否合法的函数checkPrice()。代码如下:

          <script language="javascript">
          function checkPrice(){
          if(form1.dj.value==0&&form1.dj.value==""){                    //判断是否输入单价
              alert("请输入单价!");form1.dj.focus();form1.dj.select();return;}
            if(isNaN(form1.dj.value)){                                  //判断单价文本框的值是否为数值型数据
                alert("您输入的单价不是有效值!");form1.dj.focus();form1.dj.select();return;
              }
          }
          </script>

(2)应用JavaScript编写验证输入的数量(数值型数据)是否合法的函数checkNum()。代码如下:

          <script language="javascript">
          function checkNum(){
              if(form1.sl.value==0&&form1.sl.value==""){       //判断是否输入数量
                alert("请输入数量!");form1.sl.focus();form1.sl.select();return;
              }
              str=form1.sl.value;
              var Expression=/^[1-9]+(\d*$)/;
              var objExp=new RegExp(Expression);                 //创建正则表达式对象
              if(objExp.test(str)==false){                     //使用正则表达式进行验证
                alert("您输入的不是有效值(请输入自然数)!");form1.sl.focus();form1.sl.select();return;
              }
          }
          </script>

(3)在网页的适当位置添加用于获取单价、数量和金额的文本框,并为单价和数量文本添加onkeyup事件执行的操作,用于判断输入的单价和数量是否合法。关键代码如下:

          <td height="27"align="center"nowrap>单   价:</td>
          <td> <font color="#00CCFF">
            <input type="text" name="dj" value="0" onkeyup="checkPrice()">
              </font><font color="#FF0000"><font color="#0066FF">( 元 )</font>*</font></td>
          </tr>
          <tr valign="baseline" bgcolor="#CCE3FF">
          <td height="27"align="center"nowrap>数   量:</td>
          <td> <font color="#00CCFF">
            <input type="text" name="sl" value="0" onkeyup="checkNum()" onBlur="aotoPay()">
              </font><font color="#FF0000">*<font color="#0066FF">( 只能是自然数 )</font></font></td>
          </tr>
          <tr valign="baseline" bgcolor="#CCE3FF">
          <td height="27"align="center"nowrap>金   额:</td>
          <td> <input type="text" name="je" value="0" readonly="yes">

举一反三

根据本实例,读者可以:

验证用户输入的其他数据类型。

实例069 限制输入字符串的长度

本实例是一个提高录入规范性的程序

实例位置:光盘\mingrisoft\03\069

实例说明

在动态网站开发时,经常需要限制输入字符串的长度。例如本实例所介绍的论坛注册页面就要求注册用户名为10个字母或5个汉字。运行本实例,在“用户名”文本框中输入“flower的哭泣”后,单击“注册”按钮,将弹出图3.13所示的对话框,原因是输入的用户名长度为12个字符(每个汉字占两个字符)。

图3.13 限制输入字符串的长度

技术要点

为了确保用户输入的信息能够正确地保存到数据表中,需要对用户输入的字符型数据的长度进行限制。对于不同的数据库限制方法也不同,下面分别介绍。

(1)Access数据库。

由于Access数据库采用的是基于UNICODE文字编码标准,所以在计算字段中字符的长度时,将一个汉字的长度默认为一个字符,这和Form表单中的文本框组件是一样的,所以在限制字符长度时,只需将文本框的最大允许字符数属性maxlength设置为指定字段的最大长度即可。

(2)SQL Server数据库。

默认情况下,由于SQL Server数据库中的字符型(varchar、char、text)数据采用的是字符集数据格式,所以在计算字段中字符的长度时,将一个汉字的长度默认为两个字符,这就需要对英文字母和汉字分别计算其长度,但是如使用的数据类型为nvarchar、nchar和ntext,则采用UNICODE字符数据格式,与Access数据库相同,也是设置文本框的maxlength属性即可。

说明:UNICODE定义一组字母、数字和符号,SQL Server可在nchar、nvarchar和ntext数据类型中识别它们。它与字符集相关,但独立于字符集。UNICODE具有65000多个可能值(相比之下字符集只有256个值),并且存储空间是字符集的两倍。

字符集决定了SQL Server在char、varchar和text数据类型中识别的字符的类型。每个字符集都是一个国家或地区的语言所使用的256个字母、数字和符号的集合。前128个可打印字符对于所有的字符集是相同的。后128个字符(有时称作扩展字符)是每个字符集所独有的。字符集与UNICODE字符相关,但独立于UNICODE字符。

实现过程

(1)应用JavaScript编写判断输入的字符串是否大于指定长度的函数checkstr(),该函数有两个参数:str(用于指定要判断的字符串)和digit(用于指定字符串的最大长度),返回值为true或false。代码如下:

              <script language="javascript">
              function checkstr(str,digit){
            var n=0;
            for(i=0;i<str.length;i++){
              var leg=str.charCodeAt(i);         //获取字符串中指定字符的Unicode编码
              if(leg>255){
                  n+=2;
              }else {
                  n+=1;
              }
              }
              if (n>digit){
              return true;
              }else {
              return false;
              }
          }
          </script>

(2)编写自定义的JavaScript函数checkuserinfo (),用于在提交表单前判断用户输入是否合法,在该函数中再调用checkstr ()函数判断输入的字符串是否大于指定长度,如果大于则给予提示,否则提交表单。关键代码如下:

          <script language="javascript">
          function checkuserinfo(){
              var name=userinfo.username.value;    //获取输入的用户名
              if(name==""){
              alert("用户名不能为空");
              userinfo.username.focus();          //用户名文本框获得焦点
              }else{
              if(checkstr(name,10)){
                    alert("用户名长度不能超过10个字符,请重新输入!");
                    userinfo.username.focus();
              }
              }
          }
          </script>

举一反三

根据本实例,读者可以:

实现在线论坛或留言簿中限制留言主题的字数;

实现新闻网中限制新闻标题的字数。

实例070 验证是否为有效的二进制数

本实例是一个提高录入规范化的程序

实例位置:光盘\mingrisoft\03\070

实例说明

在实际项目开发时,经常需要验证用户输入的信息是否合法。本实例将对用户输入的内容进行验证,判断其是否为有效的二进制数。运行本实例,在“用请输入二进制数”文本框中输入“0101010”后,单击“检测”按钮,将弹出图3.14所示的对话框,原因是除了0以外的二进制不能以0开头。

图3.14 验证是否为有效的二进制数

技术要点

要验证二进制数是否合法,首先需要了解什么是二进制数。二进制数是逢二进位的进位制。二进制数只有0,1两个基数。

验证二进制数的正则表达式如下:

        /^0$|^1[10]*$/

说明:关于在JavaScript中调用正则表达式的详细介绍请参考实例062。

实现过程

(1)使用JavaScript编写一个用于检测输入的二进制数是否合法的函数checkBinary(),该函数只有一个参数NO,用于指定用于输入二进制数的文本框,返回值为true或false。代码如下:

        <script language="javascript">
        function checkBinary(number){
            var Expression=/^0$|^1[10]*$/;             //定义正则表达式
            var objExp=new RegExp(Expression);         //创建正则表达式对象
            if(objExp.test(number)==true){           //通过正则表达式验证
                return true;
            }else{
                return false;
            }
        }

(2)调用check()函数判断用户输入的二进制数是否合法,如果不合法,将提示用户输入正确的二进制数,关键代码如下:

        <script language="javascript">
        function check(number){
            var num=number.value;                    //获取输入的二进制数
            if(checkBinary(num)==true){             //通过正则表达式验证
                alert("您输入的是有效的二进制数!");
            }else{
                alert('请输入有效的二进制数!');
                number.focus();                    //让number文本框获取焦点
            }
        }
        </script>

举一反三

根据本实例,读者可以:

实现验证进入的八进制数是否合法。