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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
javascript不可用的问题探究
Oct 01 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
晶体管单管来复再生式收音机
2021/03/02 无线电
Oracle Faq(Oracle的版本)
2006/10/09 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
jQuery实现动态删除LI的方法
2017/05/30 jQuery
深入研究React中setState源码
2017/11/17 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
JavaScript闭包相关知识解析
2019/10/19 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python中url标签使用知识点总结
2020/01/16 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
c++工程师面试问题
2013/08/04 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
周年庆典主持词
2014/04/02 职场文书
求职信格式范文
2015/03/19 职场文书
党员证明模板
2015/06/19 职场文书
中秋节随笔
2015/08/15 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
Python绘制散乱的点构成的图的方法
2022/04/21 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS