近期做项目。须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习。

【样例例如以下】

1.前台页面

 <form id="form1" method="post">username:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error"></span>--><br />密  码:<input type="password" id="Password" name="Password" /><br /><input type="submit" id="btnRegister" name="btnRegister" value="注冊" /><input type="button" id="btnCancel" name="btnCancel" value="取消" /></form>

2.Javascript

    <script type="text/javascript">//加入自己定义验证jQuery.validator.addMethod("checkPWD", function (value, element) {var flag = false;//flag = chkpwd($("#pwd"));   //自己定义验证password逻辑return this.optional(element) || flag;});$(function () {$("#form1").validate({rules: {UserName: {required: true,//emote: function () {  //验证username是否存在是否存在  方法一//   $.ajax({//       type: 'POST',//       url: "Handler/Handler1.ashx",//       data: { name: $("#UserName").val() },//       async: false,//       success: function (data) {//           $("#name_error").html(data);//       }//   });//}remote: {         //验证username是否存在是否存在   方法二type: "POST",url: "Handler/Handler1.ashx",   //后台处理程序dataType: "json",  //接受数据格式data: {   //要传递的參数action: function () { return "CheckName" },name: function () { return $("#UserName").val(); },param1: function () { return "自己定义參数1"; }}}},Password: {required: true,checkPWD: true    //自己定义验证。若想不用自己定义验证,把 true 改成 false 就可以。

} }, messages: { "UserName": { required: "<span>username不能为空.</span>", remote: "<span>该会员名已存在!

</span>" }, "Password": { required: "<span>password不能为空.</span>", checkPWD: "<span>password不符合自己定义规则。

。。</span>" } } }); }) </script>

3.后台处理程序

        public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";string action = context.Request["action"];//获取username和自己定义參数string name = context.Request["name"];string param1 = context.Request["param1"];if (!string.IsNullOrEmpty(name)){//模拟查询数据库,假设用户输入的是 admin 。则提示该账户已存在。返回 falseif (name.Equals("admin")){context.Response.Write("false");}else{context.Response.Write("true");}}}

4.执行结果

4.1 用户未输入数据时报错:

4.2 用户输入错误信息时报错:

jquery.validate.js插件的使用方法相关推荐

  1. 当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件,至少要选择两次时间,才能验证成功的问题...

    当用 bootstrap-datepicker.js 这个插件选择时间,再用jquery.validate.js进行验证,当时间不为空时则验证通过.可能由于在时间插件弹出来时,input框的值发生改变 ...

  2. jQuery表单校验jquery.validate.js的使用

    jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...

  3. validate.js 插件表单校验

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  4. jquery.validate.js 详解

    jquery下载地址:https://jquery.com/download/ jquery.validate.js下载地址:https://cdnjs.com/libraries/jquery-va ...

  5. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  6. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足! 问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下 ...

  7. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  8. jQuery.validate.js API

    为什么80%的码农都做不了架构师?>>>    jQuery.validate.js API 转载于:https://my.oschina.net/azheng/blog/10281

  9. ASP.NETmvc常用JQUERY收藏【jquery.form.js结合jquery.validate.js】

    虽然jquery.form.js可以通过自定义验证方式实现个性化的验证,不过我们大量使用的还不是一个红星(*) 在jquery.form.js下使用jquery.validate.js就可以简简单单的 ...

最新文章

  1. 性能压测诡异的Requests/second 响应刺尖问题
  2. 【研发管理】为什么你的高效交付,却没有好的业绩
  3. python循环函数怎么改变变量_python:循环定义多个变量
  4. 移动端HTML5音频与视频问题及解决方案
  5. 如何进行文件管理、备份
  6. 百套Java实战项目
  7. c# 服务器打印word文档,C#完成word文档打印的方法
  8. Python之XML解析
  9. Android monkey 压力测试
  10. 如何获取未安装apk应用的包名、应用名以及版本信息等
  11. PS进阶篇——如何PS软件给图片部分位置打马赛克(四)
  12. 利用pdf2image,将pdf文件转换成图片
  13. MySQL 8.0原理与实战一网打尽,甲骨文数据库专家硬刚5年之作
  14. [DAY003]考研数学极限的计算知识点与题目总结(三)
  15. 产品经理(PM)和产品负责人(PO)的区别
  16. vb 和vb.net的区别
  17. 前端兼容性问题解决方案
  18. Java遍历目录下的所有文件
  19. ImportError: DLL load failed while importing win32api
  20. 第二次作业:支付宝案例分析

热门文章

  1. java mapreduce 标准差_MapReduce设计模式之概要设计模式
  2. k1075停运吗_怀化火车站(怀化火车停运最新消息)
  3. 2015 2020 r4烧录卡 区别_谁跑赢了沪深300?聪明指数全收益排名 2020-04-10
  4. windows mysql 免安装_windows 免安装mysql
  5. java main启动spring_gradle 搭建springMVC项目,main函数启动
  6. mysql表结构设计_表结构设计
  7. app显示服务器借口错误,hbuider 运行 uni-app 电脑端安卓模拟器接口请求错误
  8. 12天背诵楞严咒的技巧_背诵楞严咒的技巧
  9. 两种IO模式:Proactor与Reactor模式
  10. 8皇后以及N皇后算法探究,回溯算法的JAVA实现,递归方案