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 判断客户端浏览器类型代码
Mar 01 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
PHP 数组基础知识小结
2010/08/20 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
php可变长参数处理函数详解
2017/02/22 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python实现简单的文字识别
2018/11/27 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python help函数实例用法
2020/12/06 Python
浙大网新C/C++面试解惑
2015/05/27 面试题
教师党员思想汇报
2014/01/06 职场文书
上班早退检讨书
2014/01/09 职场文书
小班评语大全
2014/05/04 职场文书
企业安全标语
2014/06/07 职场文书
优秀党支部申报材料
2014/12/24 职场文书
《法国号》教学反思
2016/02/22 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
解决xampp安装后Apache无法启动
2022/03/21 Servers