• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

jQuery formValidator表单验证插件的使用

2015-06-10 23:28:43   来源:叶景网络
    jQuery formValidator表单验证插件是一款客户端表单验证插件。第一次接触jQuery formValidator是学习phpcms的时候,因为其在表单验证方面功能强大,且使用简单,所以我在做网站开发时常常用到。在WBlog中涉及到写入数据时总是少不了jQuery formValidator的验证。这里主要介绍jQuery formValidator使用方法。
    下面以安装包install.php的例子来说明jQuery formValidator的使用方法。
    一、加载jQuery formValidator的相关文件
    <script type="text/javascript" src="/W3note/Modules/Admin/Tpl/Public/Js/jquery-1.4.3.min.js"></script>        
    <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文件。
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
QQ客服不加好友直接打开聊天窗口 QQ客服不加好友直接
网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2.0网页
手机wap页面前端的一点体会 手机wap页面前端的
常用的文本符号以及非主流符号大全 常用的文本符号以及
关注排行RANKING
1

QQ客服不加好友直接打开聊天窗口

QQ客服不加好友直接打开聊天窗口 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

2

网页手机wap2.0网页布局 页面尺寸设置

网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2 0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以...

3

手机wap页面前端的一点体会

手机wap页面前端的一点体会 手机端的html页面就像回到了最早的纯文本时代~~ 没有JS,只有单纯的div+css~容易上手,...

4

常用的文本符号以及非主流符号大全

常用的文本符号以及非主流符号大全 在word文档工具栏的符号那里提供了许多文本符号,但我还是觉得不够用,于是我从网上搜寻...

5

input /button链接的几种方法

input /button链接的几种方法 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

6

用JavaScript怎么实现页面跳转

用JavaScript怎么实现页面跳转 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

7

从GB2312(UTF-8)页面获取表单转换...

从GB2312(UTF-8)页面获取表单转换成UTF-8(GB2312) 由于我的网站编码是GB2312,而另一个网站(不是我的)编码却是UTF-8, ...

8

收藏本站和设为主页代码

收藏本站和设为主页代码 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

textarea 滚动条属性设置

textarea 滚动条属性设置 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...