JQuery validate插件Remote用法大全


Posted in Javascript onMay 15, 2016

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用法大全的相关知识,希望对大家以上帮助!

Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
JavaScript绑定事件监听函数的通用方法
May 14 #Javascript
易被忽视的js事件问题总结
May 14 #Javascript
jQuery防止重复绑定事件的解决方法
May 14 #Javascript
You might like
php读取msn上的用户信息类
2008/12/05 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
node中的cookie的具体使用
2018/09/13 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python能做什么 python的含义
2019/10/12 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python中threading开启关闭线程操作
2020/05/02 Python
如何完美的建立一个python项目
2020/10/09 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
商场活动策划方案
2014/01/24 职场文书
军训感想500字
2014/02/20 职场文书
团员个人年度总结
2015/02/26 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
担保书格式范文
2015/09/22 职场文书