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 相关文章推荐
JsDom 编程小结
Aug 09 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
微信小程序实现日历效果
Dec 28 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
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聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
高效率JavaScript编写技巧整理
2013/08/23 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python装饰器常见使用方法分析
2019/06/26 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
一套C#面试题
2013/10/09 面试题
八年级美术教学反思
2014/02/02 职场文书
眼镜促销方案
2014/03/15 职场文书
开业典礼主持词
2014/03/21 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫