随心的博客

好记性不如个烂笔头，随心记录！

返回顶部

jquery验证插件的使用

 

这个插件是自己一直在用的，感觉很好用，不需要每个项目写那么多讨厌的js代码了，并且写的还不一定好，验证每次都写还是很麻烦的

下载地址：https://files.cnblogs.com/ypeih/jquery%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81.zip

 

写说明不如直接上实例：这个实例是压缩包里面自带的哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js"></script>
<script src="js/jquery.validator.js"></script>
<script src="js/jquery.corners.min.js"></script>
<title>最基本的验证</title>
<meta name="description" content="月影 jquery validator jquery表单验证检验插件 对于即使不懂JavaScript的前台美工，也可以在不编写JavaScript逻辑代码的情况下，实现强大的验证效果。结果投入使用后，　均达到了非常好的效果" />
<link href="skin.css" rel="stylesheet" type="text/css" />
<style>
.errorTip{
    background-image:url(images/access_disallow.gif);
    background-repeat:no-repeat;
    padding-left:16px;
}

.errorInput{
    background-color:#FFCC33;
}

.validTip{
    background-image:url(images/access_allow.gif);
    background-repeat:no-repeat;
    background-position:left top ;
    padding:2px;
}
</style>
</head>

<body>
<div class="item">
    <div class="title">基本检验 不能为空</div>
<form id="myform1">
<input type="text" require="true" datatype="require" msg="此项不能为空" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform1').checkForm();
</script>
</div>

<div class="item">
    <div class="title">基本检验 电子邮件</div>
<form id="myform2">
<input type="text" require="true" datatype="email" msg="电子邮件地址要合法" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform2').checkForm();
</script>
</div>

<div class="item">
    <div class="title">基本检验 非必需项但非空时格式要正确</div>
<form id="myform3">
<input type="text" require="false" value="abc" datatype="email" msg="电子邮件格式错误" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform3').checkForm();
</script>
</div>


<div class="item">
    <div class="title">基本检验 字符串（密码输入一致）</div>
<form id="myform4">
<input type="text" name="pwd" require="true" value="" datatype="limit" min="3" max="8" msg="3至8位字符串" />
<br />
<input type="text" require="true" value="" datatype="repeat" to="pwd" msg="两次输入必须匹配" />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform4').checkForm();
</script>
</div>

<div class="item">
    <div class="title">基本检验 range属性</div>
<form id="myform5">
<input type="text" require="true" value="" datatype="range" min="18" max="60" msg="18到60之间的数字" />
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform5').checkForm();
</script>
</div>

<div class="item">
    <div class="title">基本检验 compare属性</div>
<form id="myform6">
<input require="true" datatype="compare" compare=">100" msg="请输入大于100的数" /><br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform6').checkForm();
</script>
</div>


<div class="item">
    <div class="title">基本检验 group属性(必须选中2至5个)</div>
<form id="myform7">
<input type="checkbox" name="chk[]" /> 旅游
<input type="checkbox" name="chk[]" /> 网络
<input type="checkbox" name="chk[]" /> 音乐
<input type="checkbox" name="chk[]" /> 读书
<input type="checkbox" name="chk[]" /> 交友
<input type="checkbox" name="chk[]" /> 养花
<input type="checkbox" name="chk[]" require="true" datatype="group" min="2" max="5" msgid="fav" msg="必须选中2至5个选项" /> 运动
<div id="fav"></div>
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform7').checkForm();
</script>
</div>


<div class="item">
    <div class="title">基本检验 下拉框必须选中</div>
<form id="myform8">
<select require="true" datatype="require" msg="必须选中某一项">
<option value="">请选择一项</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform8').checkForm();
</script>
</div>


<div class="item">
    <div class="title">自定义正则（只能上传png|jpg|jpeg|gif）</div>
<form id="myform9">
<input type="file" require="true" datatype="custom" regexp=".+\.(jpg|jpeg|jpg|gif)$" msg="只能上传jpg|jpeg|jpg|gif文件"/>
<br />
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform9').checkForm();
</script>
</div>

<div class="item">
    <div class="title">普通验证与ajax验证组合</div>
<form id="myform10">
<input type="text" name="username" require="true" datatype="userName|ajax" url="./ajax.php?action=check" msg="请输入合法的用户名|用户名已经被占用了"/>
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform10').checkForm();
</script>
</div>

<div class="item">
    <div class="title">指定msg显示的DOM元素</div>
<form id="myform11">
<input type="text" require="true" datatype="require" msgid="tip" msg="不能为空的!"/>
<input type="submit" value="提交" /><input type="button" class="showsource" value="源码" />
</form>
<textarea class="source" showed="0"></textarea>
<script>
$('#myform11').checkForm();
</script>
</div>
<div id="tip"></div>
<hr size="0" />

powered by zhangxugg@163.com   &nbsp;  <a target="_blank" href="http://www.zhixinku.com/zhangxu">http://www.zhixinku.com/zhangxu</a>

<script>
$('.item').corners('5px');
$('.showsource').click(function () {
    var s = $(this).parents('.item').find('textarea');
    var showed = s.attr('showed');
    if(showed=='0') {
        var str = $(this).parents('form');
        s.val(jQuery.trim(str.html())).fadeIn(500);
        s.attr({showed:'1'});
    } else {
        s.slideUp(500);
        s.attr({showed:'0'});
    } 
});

$('.item textarea').hide();
</script>
</body>
</html>
View Code

 

使用方法：

 第一步：引入验证文件

　

<script src="js/jquery.js"></script>
<script src="js/jquery.validator.js"></script>
<script src="js/jquery.corners.min.js"></script>

 

第二步：加载样式

<style>
.errorTip{
 background-image:url(images/access_disallow.gif);
 background-repeat:no-repeat;
 padding-left:16px;
}

.errorInput{
 background-color:#FFCC33;
}

.validTip{
 background-image:url(images/access_allow.gif);
 background-repeat:no-repeat;
 background-position:left top ;
 padding:2px;
}
</style>

第三步：将图片放到 images下面

 

 

第四步：在表单后面写对应的验证文件

 <script>
$('form').checkForm();
</script>

具体看文档或者直接看实例

 

目前支持的认证为：

不能为空 require
电子邮件地址 email
电话号码（支持分机号） phone
手机号码 mobile
url 地址 url
身份证号码 idCard
货币 currency
正整数 number

 邮编 zip
IP 地址 ip
QQ 号码（新版的 QQ 帐号可使用 Email, 建议使用正则自定义验证） qq
正负整数 integer
小数 double
英文字母 english
纯汉字 chinese
用户名 ( 数字及字母组合的字符串 ) userName
安全字符串（不能包含 ! # < > ? * $ + - =@ % . * { } ( ) | \ / ~ ^ 等字符的串） isSafe
输入长度限制（即输入长度必须在一定范围内） limit / limitB
日期 date
密码重复匹配 repeat
整数或小数值必须在一定范围内（比如年龄必须在 18 至 60 岁之间） range
数值比较 （比如年龄必须大于 18, 但没有上限 / 至多购买 100 件等等，不能为 0, 必须为 1 等等，相当于只有一边范围的） compare
复选框必须选中 m 到 n 个 group
下拉框必须选中 compare/require
Ajax 服务器端检验 ajax
自定义正则表达式 custom
多条件组合验证 require|limit

 

posted @ 2013-08-25 11:55  yangphp  阅读(313)  评论(0)  编辑  收藏  举报