相思资源网 Design By www.200059.com

一、jQuery.validate简介

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

1、配置方法

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

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

  <script src="/UploadFiles/2021-04-02/jQuery.1.8.3.js">

  然后只要定义验证规则和指定错误提示位置就可以了。

  在$(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" />&nbsp;&nbsp;
      <input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
    </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="/UploadFiles/2021-04-02/jquery-1.7.1.js">

后台控制器代码:

  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使用详解

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

标签:
jQuery,验证,插件,validate

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery验证插件validate使用详解”

暂无jQuery验证插件validate使用详解的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。