jQuery插件之validate

一、jQuery.validate简介

  jQuery.validate.js插件用于对表单输入进行验证,其使用配置非常简单。支持多事件触发,自带多种验证规则,还支持自定义验证规则。

  1、配置方法

   先导入jQuery库,然后导入Validate插件,如果是中文提示还需要导入messages_zh.js。

   注意Validate的导入要在jQuery库之后。代码如下:

    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
    <script src="messages_zh.js" type="text/javascript"></script>

  然后只要定义验证规则和指定错误提示位置就可以了。

  在$(document).ready()里加入验证规则与错误提示位置,代码如下:

   JS代码:
  <script type="text/javascript">
        $(function () {
            $("#form1").validate({
                /*自定义验证规则*/
                rules:{
                    username:{ required:true,minlength:6 },
                    userpass:{ required:true,minlength:10 }
                },
                /*错误提示位置*/
                errorPlacement:function(error,element){
                    error.appendTo(element.siblings("span"));
                }
            });
        })
    </script>
  
  HTML代码:
  <form id="form1" action="#" method="post">
    <p>用户登录</p>
    <p>名称:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
    <p>密码:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
    <div>
      <input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp;
      <input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
    </div>
  </form>

  这样就完成了非常简单的表单验证功能,当表单填写不正确时Validate在<input>的兄弟<span>元素里显示错误提示。

  2、name属性

  说明:jQuery.validate.js插件与<input>的关联使用的是表单的name属性。只有存在name属性的<input>才能验证!

二、自定义错误提示位置

  当我们想设置错误提示的显示位置怎么设置呢?

  答案就是在errorPlacement参数里,你可以按照自己的需要自定义书写,用的是jQuery

          /*错误提示位置*/
          errorPlacement:function(error,element){  //第一个参数是错误的提示文字,第二个参数是当前输入框
               error.appendTo(element.siblings("span"));  //用的是jQuery,这里设置的是,错误提示文本显示在当前文本框的兄弟span中
          }

三、自定义错误提示信息

  例如当我们有多个require:true选项,我想根据不同的选项设置不同的提示怎么办呢?

  答案就是在messages参数里。用层层嵌套的方式设置自己需要的提示信息。如果某个字段没有message信息,这时才调用默认的提示信息。

            messages: {
                UserName: {
                    required: "请输入用户名!"  //注意,同样是必填项,但是优先显示在messages里的提示信息
                },
                Email:{
                    required:"请输入邮箱地址!"  //不会统一输出 必填字段 了哦
                }
            }

   实际上,jQuery.Validate默认的错误提示是生成一个class=error的label,所以,如果想设置样式,最简单的方法就是针对这个label设置就OK了,当然默认的label是可以手动更改的。

四、ajax异步验证

  只需要用到remote即可,注意后台返回的JSON只能够是true或false。

  以下给出一个综合示例,前台HTML代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>表单验证插件</title>
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/messages_zh.js" type="text/javascript"></script>
    <script src="/Scripts/validates.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").validate({
                rules: {
                    UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" },
                    Email: { required: true,email:true },
                    UserPassword: { required: true ,minlength: 6 },
                    Mobile: { required: true, number:true },
                    IdCard: { required: true,isIdCardNo: true },
                    Age: { required: true ,number:true,min:1,max:100 }
                },
                messages:{
                    UserName: {
                        required: "请输入用户名!",
                        minlength: "用户名长度最少需要3位!",
                        maxlength: "用户名长度最大不能超过18位!",
                        remote: "此用户名已存在!"
                     },
                    Email: {
                        required: "请填写邮箱",
                        email: "请输入正确的邮箱格式"
                    },
                    UserPassword: {
                        required: "请填写你的密码!",
                        minlength: "密码长度不能小于6位"
                    },
                    Mobile: {
                        required: "请填写你的手机号码",
                        number:"手机号码只能为数字"
                     },
                    IdCard: {
                        required: "请输入身份证号码!",
                        isIdCardNo:"请输入正确的身份证号码!"
                    },
                    Age: {
                        required: "请输入年龄!",
                        number: "请输入数字",
                        min: "年龄不能小于1",
                        max: "年龄不能大于100"
                    }
                },
                /*错误提示位置*/
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" method="post" action="">
        <div>
        <p> 用户名:<input type="text" value="" name="UserName" /> </p>
        <p> 密码:<input type="password" value="" name="UserPassword" /> </p>
        <p> 邮箱:<input type="text" value="" name="Email" /> </p>
        <p> 手机号码:<input type="text" value="" name="Mobile" /> </p>
        <p> 身份证号码:<input type="text" value="" name="IdCard" /> </p>
        <p> 年龄:<input type="text" value="" name="Age" /> </p>
        <p> <input type="submit" id="btn1" value="提交"></p>
        </div>
    </form>
</body>
</html>

  后台控制器代码:

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult CheckUserName()
        {
            string username = HttpContext.Request.QueryString["username"];
            bool succeed = true;
            if (username == "admin")
            {
                succeed = false;
            }
            return Json(succeed, JsonRequestBehavior.AllowGet);
        }
    }

  最终效果如下图所示

  

时间: 2024-10-10 06:35:17

jQuery插件之validate的相关文章

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种

一步一步写jQuery插件

转载自:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下

写JQuery 插件 什么?你还不会写JQuery 插件

http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简

jQuery插件——Validation Plugin表单验证

jQuery表单验证插件:https://plugins.jquery.com/tag/validate/ jQuery Validation插件是最常用的插件之一:http://jqueryvalidation.org/ 一.基本API rules里面的“username”是input中的“name”,不是“id”. 表单验证,主要是俩:一是规则,二是提示信息 当在使用validate插件的时候: 使用validate()方法的时候将debug设置为true,那么表单不会提交,只进行检查,调试

15 款优化表单的 jQuery 插件

网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,"联系我们"页面会提供一个表单给用户填写他们的信息和想提的建议或者问题,但是开发者往往只关注网站的设计和用户交互的内容,并不会注意到用户进 行交互的方式--表单. 以下整理的这个列表就是为 Web开发者准备的,包括了 15 款优化表单的 jQuery 插件.希望大家能从中找到适合自己的 jQuery 插件,优化网页表单,更好的与用户进行交互.

【jQuery】学习jQuery插件的使用与写法(表单验证插件-validation)

最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示:实时验证. 三种不同的写法 1.1 确认哪个表单需要被验证,引入jquery.validate.js插件 <script type="text/javascript"> $(document).ready(function(){ $("#commentForm&qu

如何编写JQuery 插件详解

转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式

推荐60个jQuery插件(转)

jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现Javascript自定义动态调整网页文字大小 jQuery插件Magnify放大镜实现javascript图片放大功能 jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果 jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果