网页中的注册都需要进行验证,来判断我们输入的格式是否是服务器要求的格式,如果能在服务器进行验证之前,先把一大部分输入格式不是所要求的给筛选掉,那么就会大大的减轻服务器的压力。这就需要用到客户端验证,我们使用Js来演示。
当我们注册网易的时候如果什么都没填,就会出现上边的提示,这种效果是如何做到的呢?
首先写如下代码,做出个form表单
效果如下:
下面我们需要js来进行非空验证
需要先得到表单对象,并处罚表单的submit事件(注意一定是表单的submit事件)实列代码:
上边那个图片中是onsubmit不是submit请大家自己修正,
然后需要在函数中判断(即单击提交后判断)用户名或者密码是否为空,实列代码为:
需要注意的是我画方框的部分,这就是验证是否为空,为空了给提示语,另外一定要注意,如果为空的话, 要给个返回值false ,即return false;
效果:
会发现提示字不能去掉,那么就需要把innerHTML改为空,但是什么时候修改合适呢?
当输入框中有值时,就需要把提示性文字给去掉,做法,添加一个键盘按下事件,当键盘按下,提示语消失 ,实列代码:
加上这两个函数,效果就不给大家演示了,自己试试就知道了。 那么为了更好的提高用户的体验性,需要提示错误时光标跳到错误的的那点,做法,获取事件的焦点,实列代码:
划线的那两段代码:
效果是点击提交时光标自动跳转到错误的地方:
还有一个地方需要注意下,现在用户名还是可以为空格的,但是正常的用户名是不能为空格的,我们仅仅需要一小步就可以解决了 : 实列代码
在上边的代码中多了个去空格操作,即 .trim() 操作。
在现实开发中往往都不会用submit按钮,因为它不安全,当我们把js禁用的时候,它就可以顺利的跳转到指定好的jsp页面中去,解决方法是用button按钮替代 submit按钮。
首先把submit按钮替换为 button按钮,然后把触发表单事件改为触发button事件 ,再修改 判断是否为空的语句,实列:
把以前那堆修改为红色方框中的内容。 当我们禁用js时再点提交按钮就不会跳转到指定的jsp页面了。