微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery验证插件validate使用详解

一、jQuery.validate简介

  jQuery.validate.js插件用于对表单输入进行验证,其使用配置非常简单。支持多事件触发,自带多种验证规则,还支持自定义验证规则。

1、配置方法

   先导入jQuery库,然后导入Validate插件,如果是中文提示还需要导入messages_zh.js。

   注意Validate的导入要在jQuery库之后。代码如下:

rush:js;">

HTML代码

rush:xhtml;">   
用户登录

    

名称:

    

密码:

    
                  
  

  这样就完成了非常简单的表单验证功能,当表单填写不正确时Validate在的兄弟元素里显示错误提示

2、name属性

  说明:jQuery.validate.js插件的关联使用的是表单的name属性。只有存在name属性才能验证!

二、自定义错误提示位置

  当我们想设置错误提示显示位置怎么设置呢?

  答案就是在errorPlacement参数里,你可以按照自己的需要自定义书写,用的是jQuery

rush:js;"> /*错误提示位置*/ errorPlacement:function(error,element){  //第一个参数是错误提示文字,第二个参数是当前输入框 error.appendTo(element.siblings("span"));  //用的是jQuery,这里设置的是,错误提示文本显示在当前文本框的兄弟span中 }

三、自定义错误提示信息

  例如当我们有多个require:true选项,我想根据不同的选项设置不同的提示怎么办呢?

  答案就是在messages参数里。用层层嵌套的方式设置自己需要的提示信息。如果某个字段没有message信息,这时才调用认的提示信息。

rush:js;"> messages: { UserName: { required: "请输入用户名!"  //注意,同样是必填项,但是优先显示在messages里的提示信息 },Email:{ required:"请输入邮箱地址!"  //不会统一输出 必填字段 了哦 } }

实际上,jQuery.Validate认的错误提示生成一个class=error的label,所以,如果想设置样式,最简单的方法就是针对这个label设置就OK了,当然认的label是可以手动更改的。

四、ajax异步验证

  只需要用到remote即可,注意后台返回的JSON只能够是true或false。

  以下给出一个综合示例,前台HTML代码

rush:xhtml;"> 表单验证插件

用户名:

密码:

邮箱:

手机号码:

身份证号码:

年龄:

后台控制器代码:

rush:csharp;"> 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);
}

}

最终效果如下图所示:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐