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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
js弹出对话框方式小结
Nov 17 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue 数据操作相关总结
Dec 17 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
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python聊天室程序(基础版)
2018/04/01 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python 的AES加密与解密实现
2019/07/09 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
史上最全面的Java面试题汇总!
2015/02/03 面试题
打架检讨书400字
2014/01/17 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python