专注于WEB技术的IT博客

关于formValidator表单验证插件的使用

时间:2013-02-18分类: Js浏览:8427
分享到:

 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>        
<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个


4、onshow:"填写后台管理员名称"
输入框的提示说明


5、onfocus:"填写后台管理员名称"
输入框获取焦点时的提示说明


6、onerror:"填写后台管理员名称"
输入框书写错误时的提示


7、.regexValidator({regexp:"^\\w+$",onError:"格式不正确"})


为进一步验证而添加的正则,表示输入框的数据只能是数字、字母或者下划线,更多的Js正则请查看formvalidatorregex.js文件。使用这一步需要加载formvalidatorregex.js文件。

 
 


猜你喜欢
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/81.html,谢谢。
  • 评论
  • 赞助本站