一款基于纯js的客户端表单验证框架,简单易用,也方便根据需求进行扩展。需要验证的页面只需要引用该js文件,然后作一些简单的配置即可使用。以下我们来一起做一个示例吧。
首先我们准备一个简单的表单页面(test.html):
该表单中我们要对这四个表单域进行相关的客户端的验证:
姓名不能为空
年龄不能为空,且只能为数字(范围0~149)
邮编不能为空,且符合邮编格式
电话不能为空,且符合电话格式
html代码:
其中我们引入了一个validateform.js的js文件,它为我们处理相关的验证。在form里大家要注意其中的id值,因为接下来我们要在validateform.js里作相关配置时要用到这些id值。其中form的id为formname,各个表单域也对应的id为:name、age、postal、phone,在每个表单域后面我们也相应的定义了一个span ,用来接受错误提示信息,其id分别为表单域id+error组成:nameerror、ageerror、postalerror、phoneerror. 在button按钮上我们增加了一个onclick方法当我们单击的时候会触发validateandsubmitform('test')方法,大家注意这个方法的参数为test. 好了,html里的东西我们就做完了。接下来我们还要在validateform.js配置一下。
打开validateform.js文件我们只需要在content变量的path里添加如下一行就行了:
其中test为页面中validateandsubmitform方法的参数,name、age、postalcode、phone为要进行验证表单域的id,["nonull"]表示该表单域为非空,["nonull","age"]表示该表单域为非空且为格式为年龄格式。可以附加多个验证规则。该js为我们提供了几种规则:nonull : 非空 , age : 年龄 , postalcode : 邮编, phone : 电话, number : 数字。当然大家可以任意扩展(只需要简单修改下validateform.js文件即可)。
到此该表单的配置我完成了,看看效果:
使用时注意:
1、要指明清楚相关的id ,form表单的id,各表单域的id,显示错误提示的id。
2、提交时的validateandsubmitform方法的参数要与validateform.js里的配置一致。
3、示例中test.html里的编码为utf-8,同样该validate.js里的格式也是utf-8的。其它编码时要注意编码统一,以免出现提示信息乱码的情况。
在N多个页面中使用时按这样形式配置即可:
下载1.73KB