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 相关文章推荐
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
JavaScript 异步调用
Oct 25 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
react实现复选框全选和反选组件效果
Aug 25 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript 自定义事件之我见
2017/09/25 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
python运行时间的几种方法
2016/06/17 Python
python一键升级所有pip package的方法
2017/01/16 Python
Django forms组件的使用教程
2018/10/08 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
《三峡》教学反思
2014/03/01 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
事业单位个人总结
2015/02/12 职场文书
学生会任命书范本
2015/09/21 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
六年级数学教学反思
2016/02/16 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技