表单验证

发表时间:2017-05-12 16:13:23 浏览量( 22 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

为了保证用户提交的信息都是正确的,保证系统的安全性,验证是必不可少的,验证一般分为两种方式。

  • 客户端验证:直接在客户端执行JS进行验证,验证的过程中和服务器端没有任何的交互

  • 服务器端验证:页面将验证信息传回服务器端,服务器端进行验证,并将验证的结果发送回客户端 

这两个验证都是必须的,因为客户端的验证安全性不是太高,但是可以防止80%以上的用户的误操作,可以减轻服务器端的压力,而且速度非常快,用户体验高。不要以为有了客户端的验证就不需要了服务器端的了,客户端的验证是很容易绕过去的,服务器端验证安全性比较高,所以一般验证两个验证都需要写。

今天我们学习的当然是客户端的验证,客户端的验证主要就是使用JS了。

先看看下面这个注册界面,对用户的注册信息我们是有要求。不正确的信息是不会提交给后台服务器的。每一个控件我们都分别定义了对应的验证方法。

<form action="doregisert.jsp" id="formsub" >
   <table>
   <tr>
       <td>用户名:</td>
       <td><input type="text" name="username" id="username"
       onblur="checkusername()" /></td>
       <td><span id="usernameerror"></span></td>
   </tr>
   <tr>
       <td>密码:</td>
       <td><input type="password" name="pass" id="pass"
       onblur="checkpass()" /></td>
       <td><span id="passerror"></span></td>
   </tr>
   <tr>
       <td>确认密码:</td>
       <td><input type="password" name="pass2" id="pass2"
       onblur="checkpass2()" /></td>
       <td><span id="pass2error"></span></td>
   </tr>
   <tr>
       <td>邮箱:</td>
       <td><input type="text" name="useremail" id="useremail"
       onblur="checkuseremail()" /></td>
       <td><span id="useremailerror"></span></td>
   </tr>
   <tr>
       <td>固定电话:</td>
       <td><input type="text" name="uerphone" id="uerphone" /></td>
       <td><span id="uerphoneerror"></span></td>
   </tr>
   <tr>
       <td colspan="2"><input type="submit" value="注册"  /> <input
       type="reset" /></td>
   </tr>
   </table>
</form>

实现验证验证方法:

<script type="text/javascript">
  function checkusername(){
       var username=document.getElementById("username");
       var usernameerror=document.getElementById("usernameerror");
       var unamevalue=username.value;
       if(unamevalue.length<6||unamevalue.length>20){
           usernameerror.innerHTML="<font color='red'>用户格式不对</font>";
           return false;
       }else{
          usernameerror.innerHTML="正确";
           return true;
       }
       
  }
 
 
   function checkpass(){
       var pass=document.getElementById("pass");
       var passerror=document.getElementById("passerror");
       var passvalue=pass.value;
       if(passvalue.length<6||passvalue.length>20){
           passerror.innerHTML="<font color='red'>密码格式不对,必须介于6至20</font>";
            return false;
       }else{
          passerror.innerHTML="正确";
           return true;
       }
       
  }
 
   function checkpass2(){
       var pass=document.getElementById("pass");
       var pass2=document.getElementById("pass2");
       var pass2error=document.getElementById("pass2error");
       var passvalue=pass.value;
        var pass2value=pass2.value;
       
       if(passvalue!=pass2value){
           pass2error.innerHTML="<font color='red'>密码不一致</font>";
            return false;
       }else{
          pass2error.innerHTML="正确";
           return true;
       }
       
  }
 
  function checkuseremail(){
      var useremail=document.getElementById("useremail");
       var useremailerror=document.getElementById("useremailerror");
       var useremailvalue=useremail.value;
       //liubao@tom.com  
       //js  /正则表达式/
       var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
       if(!reg.test(useremailvalue)){
           useremailerror.innerHTML="<font color='red'>邮箱格式不对</font>";
           return false;
       }else{
          useremailerror.innerHTML="正确";
          return true;
       }
  }
 
</script>

现在只是验证提示,我们发现验证不过关还是网页还是会提交的,所以我们需要为这个form表单也绑定事件。

<form action="doregisert.jsp" id="formsub" onsubmit="return formsub()">

注意这里需要在onsubmit前面加上return。对应的js函数的实现

    //
  function formsub(){
     if(checkusername()&checkpass()&checkpass2()&checkuseremail()){
          return true;
     }else{
         return false;
     }
  }

效果如下:

attcontent/1b9b0ad3-7cd6-488e-894c-c2088901e808.png