jquery validationEngine的使用

简介:

1.引入文件

复制代码
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jqueryInline1.7/jquery.validationEngine-cn.js" type="text/javascript"></script>
<script src="/js/jqueryInline1.7/jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="/js/jqueryInline1.7/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="/js/jqueryInline1.7/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />
复制代码

2.启动

复制代码
//验证
$("#form1").validationEngine();

//提交
$("#submit").click(function(){
$("#form1").submit();
});
复制代码

3.为元素添加验证

添加一个

<input name="name" type="text" class="validate[required] input1 ml10" value="<!--{$aData.name}-->">

添加多个

<input id="time" name="time" type="text" class="validate[required,custom[date]] input1 ml10 mh_date" value="<!--{$aData.time}-->">

添加自定义

 

复制代码
function validate2fields(){
            if($("#firstname").val() =="" ||  $("#lastname").val() == ""){
                return false;
            }else{
                return true;
            }
        }
复制代码
"validate2fields":{
                        "nname":"validate2fields",
                        "alertText":"* 你必须有姓和名"}    
<input value=""  class="validate[required,custom[onlyLetter],funcCall[validate2fields],length[0,100]] text-input" type="text" id="lastname" name="lastname"  />

4.效果

下面看看,提示语的代码

复制代码
(function($) {
    $.fn.validationEngineLanguage = function() {};
    $.validationEngineLanguage = {
        newLang: function() {
            $.validationEngineLanguage.allRules =     {"required":{                // Add your regex rules here, you can take telephone as an example
                        "regex":"none",
                        "alertText":"* 必选字段",
                        "alertTextCheckboxMultiple":"* 请选择选项",
                        "alertTextCheckboxe":"* 需要这个复选框"},
                    "length":{
                        "regex":"none",
                        "alertText":"*在 ",
                        "alertText2":"",
                        "alertText3": " 之间"},
                    "maxCheckbox":{
                        "regex":"none",
                        "alertText":"* 检查允许超过"},    
                    "minCheckbox":{
                        "regex":"none",
                        "alertText":"* 请选择 ",
                        "alertText2":" 选项"},    
                    "confirm":{
                        "regex":"none",
                        "alertText":"* 你的字段不匹配"},        
                    "telephone":{
                        "regex":"/^[0-9\-\(\)\ ]+$/",
                        "alertText":"* 无效的号码"},    
                    "email":{
                        "regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
                        "alertText":"* 无效的邮箱"},    
                    "date":{
                         "regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
                         "alertText":"* 无效的日期,必须是YYYY-MM-DD的格式"},
                    "onlyNumber":{
                        "regex":"/^[0-9\ ]+$/",
                        "alertText":"* 只允许输入数字"},    
                    "noSpecialCaracters":{
                        "regex":"/^[0-9a-zA-Z]+$/",
                        "alertText":"* 有非法字符"},    
                    "ajaxUser":{
                        "file":"validateUser.php",
                        "extraData":"name=eric",
                        "alertTextOk":"* 这个用户是合法的",    
                        "alertTextLoad":"* 加载中,请等待",
                        "alertText":"* 这个用户已经存在"},    
                    "ajaxName":{
                        "file":"validateUser.php",
                        "alertText":"* 这个名字已经被使用",
                        "alertTextOk":"* 这个名字是可以的",    
                        "alertTextLoad":"* 加载中,请等待"},        
                    "onlyLetter":{
                        "regex":"/^[a-zA-Z\ \']+$/",
                        "alertText":"* 只允许输入字母"},
                    "validate2fields":{
                        "nname":"validate2fields",
                        "alertText":"* 你必须有姓和名"}    
                    }    
                    
        }
    }
})(jQuery);

$(document).ready(function() {    
    $.validationEngineLanguage.newLang()
});
复制代码

还有一些ajax的调用,继续探讨。



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3456064.html,如需转载请自行联系原作者

相关文章
|
2月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
50 14
|
3月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
79 21
|
3月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
105 16
|
3月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
98 9
|
3月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
3月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
3月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
3月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
41 2
|
3月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
3月前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件