jQuery Validate插件 reomte用法详解

在用户注册时经常要通过ajax请求判断用户账号是否已注册,最方便的方法便是用jQuery Validate插件
reomte方法

Jquery Validate插件, 调用远程方法验证参数, remote的用法:

在validate的方法上加入remote:"校验方法",例如:remote:
"/test/checkAccount.jsp", 这时传进checkAccount.jsp的参数就是account=$("#account").val(),
这个是jquery.validate自动加参,不用手动修改,若参数名称不是变量名,可以自行修改成:

remote: "/test/checkAccount.jsp?paramName=" + $("#account").val() 这时校验方法需返回boolean值,例如:account可用就out.print(false)或account不可用就out.print(true);

这里贴出善达网的注册代码:

$("#register").validate({

rules: {

"user.email": {

required: true,

email: true,

remote:{

type:"POST",

url:"/passport/account/validateEmail",

data:{

email:function(){return $("#email").val();}

}

}

}

//此处省略善达网 sdg.registre.js的部分代码

},

messages: {

"user.email": {

required: "请输入邮箱!",

email: "邮箱格式错误!",

remote: "该邮箱已被注册!"

}

//此处省略善达网 sdg.registre.js的部分代码

},

//此处省略善达网 sdg.registre.js的部分代码

});

对应的html代码 <input type="text" class="input-block-level tips" name="user.email"
id="email">更多的这个页面的html代码大家可以自己到善达网去找到。善达网的后台是用jFinal框架写的,因为没有看过善达网的后台代码,具体后面怎么实现不清楚。

一般在后台的校验方法的写法则是:

//此处以SpringMVC为例,列出核心代码

@Controller

@RequestMapping("/passport/account")

public class UserAction {

@Autowired

UserManager
usermanager;//用户管理类,负责从数据中读取用户数据

@RequestMapping(value
= "/validateEmail", method = RequestMethod.POST)

public
String validateEmail(HttpServletRequest request,HttpServletResponse response) {

String email=request.getParamaters("user.email");

Boolean isExisted=usermanager.isExistedUser(email);//根据eamil号从数据库中查找该email是否已注册

if (isExisted)

response.write("true");

else

response.write("false");

return null;

}

}

jQuery Validate插件 reomte用法详解

时间: 2024-12-25 11:11:36

jQuery Validate插件 reomte用法详解的相关文章

boboJquery表单插件ajaxForm用法详解

插件主要的方法: ajaxFormajaxSubmitformToArrayformSerialize fieldSerializefieldValueclearFormclearFieldsresetForm 示例代码: 1 // wait for the DOM to be loaded 2 $(document).ready(function() {  3    // bind 'myForm' and provide a simple callback function   4    $

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

jQuery的bind()方法用法详解

bind()方法用法详解: 此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用. 语法格式: $(selector).bind(type,[data],function(eventObject)) 此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如: <!DOCTYPE html> <html> <head> <meta

jquery.validate.js 验证框架详解

项目中遇到这个js框架 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的

jQuery校验 jQuery Validate 表单验证详解

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"&g

Jquery表单插件ajaxForm用法详解

插件主要的方法: ajaxFormajaxSubmitformToArrayformSerialize fieldSerializefieldValueclearFormclearFieldsresetForm 示例代码: ? 1 2 3 4 5 6 7 // wait for the DOM to be loaded $(document).ready( function () {      // bind 'myForm' and provide a simple callback func

jQuery Fancybox插件使用参数详解

我是一个搬运工 本文转自http://www.weste.net/2013/4-22/90629.html 先给上Fancybox的项目主页地址:http://fancybox.net/, Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片 Fancybox播放器支持投影,

jQuery JCrop插件的使用详解

jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件 1.最基本的使用方法: <img src="demo_files/flowers.gif" id="demoImage"/> js部分: $( function() { $("#demoImage").Jcrop(); } ) 2.得到选中区域的坐标以及回调函数    

jQuery的replaceWith()函数用法详解

replaceWith,替换元素 replaceWith() 方法将选择的元素的内容替换为其他内容. 我们先在先看一个实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>无标题</ti