javaScript做form表单验证及特效

 网页中的注册都需要进行验证，来判断我们输入的格式是否是服务器要求的格式，如果能在服务器进行验证之前，先把一大部分输入格式不是所要求的给筛选掉，那么就会大大的减轻服务器的压力。这就需要用到客户端验证，我们使用Js来演示。



当我们注册网易的时候如果什么都没填，就会出现上边的提示，这种效果是如何做到的呢？  

首先写如下代码，做出个form表单



效果如下：



下面我们需要js来进行非空验证

      需要先得到表单对象，并处罚表单的submit事件（注意一定是表单的submit事件）实列代码：



上边那个图片中是onsubmit不是submit请大家自己修正，

然后需要在函数中判断（即单击提交后判断）用户名或者密码是否为空，实列代码为：



需要注意的是我画方框的部分，这就是验证是否为空，为空了给提示语，另外一定要注意，如果为空的话， 要给个返回值false ，即return false;

效果：





会发现提示字不能去掉，那么就需要把innerHTML改为空，但是什么时候修改合适呢？

当输入框中有值时，就需要把提示性文字给去掉，做法，添加一个键盘按下事件，当键盘按下，提示语消失  ，实列代码：



加上这两个函数，效果就不给大家演示了，自己试试就知道了。 那么为了更好的提高用户的体验性，需要提示错误时光标跳到错误的的那点，做法，获取事件的焦点，实列代码：



划线的那两段代码：

效果是点击提交时光标自动跳转到错误的地方：

 


还有一个地方需要注意下，现在用户名还是可以为空格的，但是正常的用户名是不能为空格的，我们仅仅需要一小步就可以解决了 ： 实列代码



在上边的代码中多了个去空格操作，即 .trim()   操作。  

              在现实开发中往往都不会用submit按钮，因为它不安全，当我们把js禁用的时候，它就可以顺利的跳转到指定好的jsp页面中去，解决方法是用button按钮替代 submit按钮。

首先把submit按钮替换为 button按钮,然后把触发表单事件改为触发button事件 ，再修改 判断是否为空的语句，实列：



把以前那堆修改为红色方框中的内容。  当我们禁用js时再点提交按钮就不会跳转到指定的jsp页面了。