JS表单验证(vidateForm)
表单的验证一直是网页设计者头痛的问题,表单验证类vidateForm方法就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。
vidateForm是基于jquer脚本框架和控件的自定义属性,对网页中的表单项输入即时进行相应验证的js组件,允许对页面中指定控件id进行验证。
此外,vidateForm中的vidateForm_DataType 方法支持对后续可能多种的控件类型进行扩充。
1、vidateForm目前可实现的验证类型有:
字符串类型(string)
2、电话号码(telnum)
3、邮箱(email)
4、身份证(cidnum)
5、邮编(codenum)
6、数字类型(num,number)
7、日期类型(datetime)
8、下拉框(select)
(这是认证系统中比较常见的数据类型验证)
2、vidateForm 的使用方法
1)页面调用jquery的js文件
2)调用vidateForm方法所在的js文件
3)如果有日期类型的验证,需要调用My97DatePicker 日期js文件。
4)对需要验证的控件进行自定义属性配置,配置规则如下:
<input type=text id = “txtUserName“rule = “string|yes |姓名“/>
5)在页面提交方法中绑定onclick=”return vidateForm()”
4、vidateForm的细节说明
页面引用了3中2个基础js文件后,在jquery.ready方法中会自动检测控件中的自定义属性rule,凡是包含了该属性的,通过“|“分隔符中的到验证类型,调用vidateForm_DataType方法进行识别验证,并对页面中”|“分隔符中的第二项为”yes“的控件进行自动触发验证,如果是必填项为空,那么页面将显示一个红色的图标,图标的提示文字为”必填项“,但出发提交事件时,触发vidateForm 方法对所有控件进行统一验证,弹出提示信息,提示图标相应变化。
5、vidateForm 的功能实现方法以及案例演示
1.图片地址定义(var nms_vidateForm_url = "vidateForm/"; //图标地址目录)2.页面初始化后即时验证以及页面提交时调用vidateForm方法时,内部方法调用步骤以及说明。