jquery.validate.js插件的使用方法
近期做项目。须要用到 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插件的使用方法相关推荐
- 当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件,至少要选择两次时间,才能验证成功的问题...
当用 bootstrap-datepicker.js 这个插件选择时间,再用jquery.validate.js进行验证,当时间不为空时则验证通过.可能由于在时间插件弹出来时,input框的值发生改变 ...
- jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
- validate.js 插件表单校验
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate.js 详解
jquery下载地址:https://jquery.com/download/ jquery.validate.js下载地址:https://cdnjs.com/libraries/jquery-va ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足! 问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- jQuery.validate.js API
为什么80%的码农都做不了架构师?>>> jQuery.validate.js API 转载于:https://my.oschina.net/azheng/blog/10281
- ASP.NETmvc常用JQUERY收藏【jquery.form.js结合jquery.validate.js】
虽然jquery.form.js可以通过自定义验证方式实现个性化的验证,不过我们大量使用的还不是一个红星(*) 在jquery.form.js下使用jquery.validate.js就可以简简单单的 ...
最新文章
- 性能压测诡异的Requests/second 响应刺尖问题
- 【研发管理】为什么你的高效交付,却没有好的业绩
- python循环函数怎么改变变量_python:循环定义多个变量
- 移动端HTML5音频与视频问题及解决方案
- 如何进行文件管理、备份
- 百套Java实战项目
- c# 服务器打印word文档,C#完成word文档打印的方法
- Python之XML解析
- Android monkey 压力测试
- 如何获取未安装apk应用的包名、应用名以及版本信息等
- PS进阶篇——如何PS软件给图片部分位置打马赛克(四)
- 利用pdf2image,将pdf文件转换成图片
- MySQL 8.0原理与实战一网打尽,甲骨文数据库专家硬刚5年之作
- [DAY003]考研数学极限的计算知识点与题目总结(三)
- 产品经理(PM)和产品负责人(PO)的区别
- vb 和vb.net的区别
- 前端兼容性问题解决方案
- Java遍历目录下的所有文件
- ImportError: DLL load failed while importing win32api
- 第二次作业:支付宝案例分析
热门文章
- java mapreduce 标准差_MapReduce设计模式之概要设计模式
- k1075停运吗_怀化火车站(怀化火车停运最新消息)
- 2015 2020 r4烧录卡 区别_谁跑赢了沪深300?聪明指数全收益排名 2020-04-10
- windows mysql 免安装_windows 免安装mysql
- java main启动spring_gradle 搭建springMVC项目,main函数启动
- mysql表结构设计_表结构设计
- app显示服务器借口错误,hbuider 运行 uni-app 电脑端安卓模拟器接口请求错误
- 12天背诵楞严咒的技巧_背诵楞严咒的技巧
- 两种IO模式:Proactor与Reactor模式
- 8皇后以及N皇后算法探究,回溯算法的JAVA实现,递归方案