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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
js获取和设置属性的方法
Feb 20 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 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
PHPlet在Windows下的安装
2006/10/09 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
纯js简单日历实现代码
2013/10/05 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
外国人聘用意向书
2014/04/01 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技