jQuery验证插件validate使用详解


Posted in Javascript onMay 11, 2016

一、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" />  



<input id="btnReset" type="button" value="取消" class="btn" />  


</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);
    }
  }

最终效果如下图所示:

jQuery验证插件validate使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS继承 笔记
Jul 13 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
AngularJS语法详解
Jan 23 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
JQuery validate插件验证用户注册信息
May 11 #Javascript
jQuery validate验证插件使用详解
May 11 #Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 #Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
You might like
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python实现的多线程http压力测试代码
2017/02/08 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python实现低通滤波器代码
2020/02/26 Python
python实现斗地主分牌洗牌
2020/06/22 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
大学生应聘求职信
2014/05/26 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
入党介绍人意见2015
2015/06/01 职场文书
交流会主持词
2015/07/02 职场文书
趣味运动会加油词
2015/07/18 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技