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 smipleChart 简单图标类
Jan 12 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
全面解析js中的原型,原型对象,原型链
Jan 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
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
python中类的一些方法分析
2014/09/25 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python ftp上传文件
2016/02/13 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python中退出多层循环的方法
2018/11/27 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书