Javascript(五)javascript实现表单验证

表单验证

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

  • 客户端验证:直接在客户端执行JS进行验证,验证的过程中和服务器端没有任何的交互
  • 服务器端验证:页面将验证信息传回服务器端,服务器端进行验证,并将验证的结果发送回客户端

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

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

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

 
        

    

    

用户名:

        οnblur="checkusername()" />

密码:

        οnblur="checkpass()" />

确认密码:

        οnblur="checkpass2()" />

邮箱:

        οnblur="checkuseremail()" />

固定电话:

实现验证验证方法:

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

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

 

   function formsub(){

      if(checkusername()&checkpass()&checkpass2()&checkuseremail()){

           return true;

      }else{

          return  false;

      }

   }

效果如下:

Javascript(五)javascript实现表单验证_第1张图片

你可能感兴趣的:(JavaScript)