JQuery validate插件Remote用法大全

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支

JQuery.validate.js 在表单验证中经常使用，初学，对于其中Remote的使用说明一下.

. 基本解释

JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法，JQuery.validate.js是对JQuery的一个插件，可以认为是对JQuery在某个特殊场景下的扩展，而Validate就是对表单验证提供的扩展。

. 场景解释

用户进行注册用户的时候，要异步的判断用户名是否存在，给出提示信息。

. 通过案例学习

Html和JavaScript结合的脚本.

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<script src="../includes/libraries/javascript/jquery.js" type="text/javascript" charset="utf-" ></script>
<script src="../includes/libraries/javascript/jquery.plugins/jquery.validate.js" type="text/javascript" charset="utf-"></script>
<script type="text/javascript">
$().ready(function() {
$("#signupForm").validate({
debug: false,
onkeyup:false,
/*忽略某些元素不做验证*/
//ignore: ".ignore",
/* 更改错误信息显示的位置
Default:
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
error.appendTo(element.parent());
*/
/*
submitHandle: function(form){
alert("submited!");
form.submit();},
*/
rules: {
/*
firstname: {
required: function(){ return true;}},
*/
firstname: {
required: true,
remote: {
url: "Learn.php",
type: "post",
//DataType: "json",
data: {
firstname: function(){
return $("#firstname").val();
}
}}},
phonenum: {
required: true,
digits: true,
rangelength: [,]},
email: {
required: true,
email: true},
password: {
required: true,
minlength: },
confirm_password: {
required: true,
minlength: ,
equalTo: "#password"}
},
messages: {
firstname: {
required: "请输入姓名",
remote: "请输入姓名，remote"},
phonenum: {
required: "请输入手机号",
digits: "存在字符，非法手机号",
rangelength: "手机号位数不对"},
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{}个字 符")},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于个字符",
equalTo: "两次输入密码不一致不一致"}
},
submitHandler: function(form){
alert("验证通过");}
});
});
</script>
</head>
<body>
<form id="signupForm" method="post" action="">
<p>
<label for="firstname">姓氏</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="phonenum">手机</label>
<input id="phonenum" name="phonenum" />
</p>
<p>
<label for="email">邮件</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</form>
</body>
</html>

后台PHP代码 BaseFunction.php

<?php
function WriteLog($msg)
{
$filename = dirname(__FILE__) ."\\Debug.log";
$handler = null;
if (($handler = fopen($filename, 'ab+')) !== false)
{
fwrite($handler, "\n".'['.date('Y-m-d H:i:s').']'."\t".$msg);
fclose($handler);
}
}
function CheckUser($UserName) {
if( $_REQUEST[$UserName] == 'php' ){
exit("false");
}
else{
exit("true");
}
}
?>

　　后台PHP代码 Learn.php

<?php
require("BaseFunction.php");
CheckUser('firstname');
?>

以上所述是小编给大家介绍的JQuery validate插件Remote用法大全的相关知识，希望对大家以上帮助！

赞 (0)

相关推荐

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • jquery.validate提示错误信息位置方法

    本文实例讲述了jquery.validate提示错误信息位置方法.分享给大家供大家参考,具体如下: 好长时间没有用jquery.validate.js这个插件了,忘得差不多了.唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问题,如果知道的话,很简单.以前遇到过,可是忘了,现在标记一下,将来在忘了,在回过头看看.俗话说的好,好记性不如烂笔头. 举个例子,大家就知道怎么回事了. rules: { name:{ require

  • jQuery Validate表单验证插件 添加class属性形式的校验

    jQuery Validate表单验证插件 添加class属性形式的校验

    本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla

  • jQuery插件Validate实现自定义校验结果样式

    jQuery插件Validate实现自定义校验结果样式

    本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码,分享给大家供大家参考,具体内容如下 效果如下: 具体步骤: 1.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/ja

  • jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • JQuery的Validation插件中Remote验证的中文问题

    根据上次的经验,我将 复制代码 代码如下: contentType: "application/x-www-form-urlencoded; charset=utf-8", 加入到ajax请求的参数中,结果这次居然不起作用了. 多次观察Fiddler结果,发现无效后,只好打开JQuery.Validation.js寻求答案了. 在remote的代码中,我发现: 复制代码 代码如下: ... var data = {}; data[element.name] = value; $.aja

  • jQuery validate插件submitHandler提交导致死循环解决方法

    本文实例讲述了jQuery validate插件submitHandler提交导致死循环解决方法.分享给大家供大家参考,具体如下: dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$('').submit();提交时,jquery validate会进行验证,submitHandler里面如果写了$('').submit();会导致死循环,而form.

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

  • Jquery validation remote 验证的缓存问题解决方法

    Jquery validation remote 验证的缓存问题解决方法

    最近项目中一直在用 Jquery validation 做校验,结合bootstrap 和 jquery form 感觉效果不错.但是remote验证的缓存问题让我头痛了很久,几乎就像放弃这款插件了. 举例说明: 现有学校,年级,班级实体 在同一学校下不能有相同的年级,在同一年级下不能有相同的班级 以同一学校下不能有相同年级为例,在验证的时候用remote方式: JS 复制代码 代码如下: "gradeId" : { required : true, min : 0, remote:

  • jquery.validate 自定义验证方法及validate相关参数

    Jquery Validate 相关参数 //定义中文消息 var cnmsg = { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字",

  • jQuery Validation插件remote验证方式的Bug解决

    不过奇怪的是,最近用下来感觉有些古怪,因为好像有些死板,已有功能的应变能力还不强,甚至还有个奇怪的Bug.任何项目有Bug其实也正常,但这个Bug其实是一个文档上已经记载了,却没有实现的功能,这就有些说不过去了.这个问题便出在remote验证方式上,还好修改起来非常容易,在此记录一下,也方便以后的参考. 在表单验证时,有时候会需要发一个AJAX请求去服务器上进行判断,例如在用户注册时检查用户名是否存在.jQuery Validation插件提供了一种remote方式来实现这一点.例如我可以这样验

  • jquery.validate使用时遇到的问题

    问题一: <script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate(); }); </script> <form id="

  • 使用jquery.validate自定义方法实现

    使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

    最近项目开发中遇到这样的需求"手机号码或者固话至少填写一个",如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种"或"逻辑的验证,于是就自己定义一个 jQuery.validator.addMethod("phone", function(value, element) { var mobile = $("#mobile").val();// 手机号码 var telephone = $(

  • jQuery验证插件 Validate详解

    jQuery验证插件 Validate详解

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

随机推荐