在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例Ajax框架/RIA → jQuery Validation 表单验证常用实例以及自定义方法的实现

jQuery Validation 表单验证常用实例以及自定义方法的实现

Ajax框架/RIA

下载此实例
  • 开发语言:js
  • 实例大小:0.13M
  • 下载次数:11
  • 浏览次数:3170
  • 发布时间:2012-12-12
  • 实例类别:Ajax框架/RIA
  • 发 布 人:星火燎原
  • 所需积分:2
 相关标签: jQuery 邮箱格式 Validation

实例介绍

【实例简介】

通过Jquery validate在不侵入代码的情况下实现:常用的表单验证,其中有邮箱格式验证、必须为数字验证、正整数、不能为空判断以及自定义验证方法的实现。

【实例效果】

【核心代码】

需要添加的引用文件如下:

 

<link  type="text/css"  href="Scripts/validate/css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
    <link  type="text/css"  href="Scripts/validate/css/Validate.css" rel="stylesheet" />
    <script src="Scripts/validate/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="Scripts/validate/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/validate/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Scripts/validate/jquery.validate.wrapper.js" type="text/javascript"></script>

自定义验证方法在这里:

//这个是自定义添加的验证方法
jQuery.validator.addMethod("positiveinteger", function(value, element) {
   var aint=parseInt(value);	
    return aint>0&& (aint "")==value;   
  }, "请输入正整数.");   

这是验证逻辑:

   $(document).ready(function () {
        // 1. prepare the validation rules and messages.
        var rules = {
            UserName: {
                required: true,
                maxlength: 15
            },
            //UserName: "required",
            Email:{ required:true,email:true},
            Age:{ required:true,number:true},
	    WorkAge:{ required:true,positiveinteger:true},
        };
        var messages = {
            UserName: {
                required: "用户名不能为空",
                maxlength: "用户名长度最长为15"
            },
            //Email: "textbox2 is requried",
            Email: {
                required: "邮箱不能为空",
                email: "请输入正确的邮箱"
            },
	    Age:{
                required: "年龄不能为空",
                number: "输入的年龄必须为数字"
            },
	    WorkAge:{
                required: "工龄不能为空",
                positiveinteger: "输入的工龄必须为正整数哦"
            }
        };
        // 2. Initiate the validator
        var validator=new jQueryValidatorWrapper("FormToValidate",//这里是你的form的Id,可自定义
                rules, messages);;
        // 3. Set the click event to do the validation
        $("#btnSave").click(function () {
            if (!validator.validate())
                return;
 
            alert("验证通过,这里可以进行添加您自定义的逻辑!");
        });
    });

 

这里是无侵入的html内容:

<form id="FormToValidate" action="#">
        <ul>
            <li><span class="lname">用户名:</span><input type="text" id="UserName"  name="UserName" />&nbsp;用户名为必填项
            </li>
            <li><span class="lname">Email :</span><input type="text" id="Email"  name="Email"  />&nbsp;该Email必须真实有效
            </li>
	    <li><span class="lname">年 龄 :</span><input type="text" id="Age"  name="Age"  />&nbsp;年龄必须为数字(这里只是示范,实际上年龄也没小于0的,呵呵)
            </li>
            <li><span class="lname">工 龄 :</span><input type="text" id="WorkAge"  name="WorkAge"  />&nbsp;工龄必须为大于零的数字
            </li>
                        <li><input type="button"   value="保存" id="btnSave" />
            </li>
        </ul>
</form>

 

实例下载地址

jQuery Validation 表单验证常用实例以及自定义方法的实现

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

第 1 楼 zfq 发表于: 2013-12-23 15:17 46
我来说两句.滴答滴答滴答滴答的..

支持(0) 盖楼(回复)

第 2 楼 ku5034 发表于: 2014-02-10 12:45 25
ok

支持(0) 盖楼(回复)

第 3 楼 suntianyu 发表于: 2014-07-17 17:00 14
不错

支持(0) 盖楼(回复)

第 4 楼 suntianyu 发表于: 2014-07-17 17:00 16
不错

支持(0) 盖楼(回复)

第 5 楼 wrwerwerw 发表于: 2014-09-22 11:37 22
不错不错不错不错

支持(0) 盖楼(回复)

第 6 楼 wrwerwerw 发表于: 2014-09-22 11:37 24
不错不错不错不错

支持(0) 盖楼(回复)

第 7 楼 tshuachuang 发表于: 2014-10-27 12:50 59
很好,有帮助

支持(0) 盖楼(回复)

第 8 楼 tshuachuang 发表于: 2014-10-27 12:51 04
很好,有帮助

支持(0) 盖楼(回复)

第 9 楼 猫猫 发表于: 2014-12-15 16:22 55
我来说两句...不错

支持(0) 盖楼(回复)

第 10 楼 culoy 发表于: 2015-01-31 20:52 45
很好啊啊

支持(0) 盖楼(回复)

第 11 楼 老师你好 发表于: 2015-05-22 17:06 39
干得漂亮~

支持(0) 盖楼(回复)

第 12 楼 zhaoting 发表于: 2015-07-08 21:33 03
我来说两句..挺好的不错啊.

支持(0) 盖楼(回复)

第 13 楼 zhaoting 发表于: 2015-07-08 21:33 14
我来说两句..挺好的不错啊.

支持(0) 盖楼(回复)

第 14 楼 wflc 发表于: 2015-08-28 18:29 11
其实我只想要里面的样式

支持(0) 盖楼(回复)

第 15 楼 男1号 发表于: 2015-12-20 11:37 24
第一次来就看到自己想要的例子,帮顶

支持(0) 盖楼(回复)

第 16 楼 xiaowanwan 发表于: 2016-01-20 11:02 17
不错,学习了

支持(0) 盖楼(回复)

第 17 楼 xiaowanwan 发表于: 2016-01-20 11:02 20
不错,学习了

支持(0) 盖楼(回复)

第 18 楼 fengqiusha 发表于: 2016-02-15 14:48 22
ok

支持(0) 盖楼(回复)

第 19 楼 fengqiusha 发表于: 2016-02-15 14:48 37
ok

支持(0) 盖楼(回复)

第 20 楼 smsgq 发表于: 2016-02-19 14:45 38
不错不错

支持(0) 盖楼(回复)

第 21 楼 wujun 发表于: 2016-02-24 10:37 23
ok

支持(0) 盖楼(回复)

第 22 楼 orangeppp1 发表于: 2016-03-12 17:08 41
很好

支持(0) 盖楼(回复)

第 23 楼 orangeppp1 发表于: 2016-03-12 17:08 48
很好

orangeppp1 2016-03-12 17:08 41

很好

支持(0) 盖楼(回复)

第 24 楼 zoucong123 发表于: 2016-03-26 23:24 38
很好

支持(0) 盖楼(回复)

第 25 楼 zoucong123 发表于: 2016-03-26 23:24 40
很好

支持(0) 盖楼(回复)

第 26 楼 hyf 发表于: 2016-04-01 15:25 55
很好

支持(0) 盖楼(回复)

第 27 楼 hyf 发表于: 2016-04-01 15:25 57
很好

支持(0) 盖楼(回复)

第 28 楼 lyd6150 发表于: 2016-08-12 10:22 07
很好

支持(0) 盖楼(回复)

第 29 楼 gzy_187 发表于: 2017-06-26 16:10 07
好例子

支持(0) 盖楼(回复)

第 30 楼 gzy_187 发表于: 2017-06-26 16:10 11
好例子

支持(0) 盖楼(回复)

发表评论

(您的评论需要经过审核才能显示)

查看所有30条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警