在jquery中表单验证不但可以使用最简单的像以前原生态的js验证之外，我们还可以使用jquery中formValidator表单验证插件来验证表单，这个的功能强大并提供了大量函数不需要我去写了，下面我来分享一下我的学习笔记吧。
jQuery formValidator表单验证插件是一款客户端表单验证插件。第一次接触jQuery formValidator是学习phpcms的时候，因为其在表单验证方面功能强大，且使用简单，所以我在做网站开发时常常用到。在WBlog中涉及到写入数据时总是少不了jQuery formValidator的验证。这里主要介绍jQuery formValidator使用方法。
下面我就用WBlog安装包install.php的例子来说明jQuery formValidator的使用方法。
一、加载jQuery formValidator的相关文件
代码如下 复制代码
<script type="text/javascript" src="/W3note/Modules/Admin/Tpl/Public/Js/jquery-1.4.3.min.js"></script>
2<script language="javascript" type="text/javascript" src="/W3note/Modules/Admin/Tpl/Public/Js/formvalidator.js" charset="UTF-8"></script>
<script language="javascript" type="text/javascript" src="/W3note/Modules/Admin/Tpl/Public/Js/formvalidatorregex.js" charset="UTF-8"></script>
把上面文件加载代码放在<head></head>之间。其中jquery-1.4.3.min.js和formvalidator.js是必需的，当然jquery-1.4.3.min.js有很多的版本您可以使用其它的版本。如果你要验证表单是否为空或者对表单字节数输入控制，加载formvalidator.js 就可以了，但是如果你要进一步验证表单输入的类型，如数字、时间格式和邮箱格式等就需要把formvalidatorregex.js文件加载进来。
二、jQuery formValidator代码的书写规则
代码如下 复制代码
<script type="text/javascript">
$(function(){
$.formValidator.initConfig({autotip:true,formid:"myform",onerror:function(msg){}});
$("#admin").formValidator({onshow:"填写后台管理员名称",onfocus:"填写后台管理员名称"}).inputValidator({min:3,max:20,onerror:"填写后台管理员名称"}).regexValidator({regexp:"^\w+$",onError:"格式不正确"});
});
</script>
与上面代码相应的验证表单
代码如下 复制代码
<form action="check.php" method="post" id="myform" >
<label for="firstname">用 户 名:</label>
<input type="text" name="admin" id="admin" style="width: 180px" value="admin"/>
</form>
上面的js代码中需要动手写的有以下部分：
1、formid:"myform"
myform是表单formr 的id，必需，否则表单提交时失去了验证效果。
2、$("#admin")
输入框admin的id 即id="admin"
3、min:3,max:20
控控制输入框input输入的字数，这里表示输入的字数范围是3-20个
3、onshow:"填写后台管理员名称"
输入框的提示说明
4、onfocus:"填写后台管理员名称"
输入框获取焦点时的提示说明
5、onerror:"填写后台管理员名称"
输入框书写错误时的提示
6、.regexValidator({regexp:"^\w+$",onError:"格式不正确"})
为进一步验证而添加的正则，表示输入框的数据只能是数字、字母或者下划线，更多的Js正则请查看formvalidatorregex.js文件。使用这一步需要加载formvalidatorregex.js文件。
每种格式支持的控件类型如下：
input textarea select
校验方式 text radio checkbox file password textarea select-one
inputValidator √ √ √ √ √ √ √
compareValidator √ √ √ √
ajaxValidator √ √ √ √ √
regexValidator √ √ √ √
functionValidator √ √ √ √ √ √ √
如果你用了不支持的校验功能，插件将忽略这个校验功能。
插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的4大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的
下面分别罗列全局初始化和5种校验方式公开的属性
formValidator: 用来做初始化的类型，必须先执行。（"√"为showalert可用参数）
属性 属性名称 默认值 showalert 详细解释
validatorgroup 校验组 "1" √ 一个页面的控件可以分成多个组，分开校验
empty 是否可以为空 false √
automodify 输入错误离开焦点的时候，自动修复错误 true √ 先给出提示然后，自动修复，目前只支持text、file、textarea三种类型
onempty 空时候的提示 "输入内容为空" 可以为空，为空时候的提示。为空者不显示
onshow 显示时候的提示 "请输入内容" 为空者不显示
onfocus 获得焦点的提示 "请输入内容" 为空者不显示
oncorrect 输入正确后的提示 "输入正确" 当你焦点离开控件的时候，如果输入正确将出现该提示。为空者不显示
tipid
显示错误的容器ID
表单ID+"Tip"
如果不自动构建提示层，表示提示成的ID号
如果自动构建提示层，表示提示层相对的目标控件
相关文章
精彩导读
热门资讯
关注我们
