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 相关文章推荐
jquery动态加载select下拉框示例代码
Dec 10 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
js星星评分效果
Jul 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
JSON stringify方法原理及实例解析
Oct 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python识别html主要文本框过程解析
2020/02/18 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
新学期标语
2014/06/30 职场文书
捐款活动总结
2014/08/27 职场文书
培养联系人考察意见
2015/06/01 职场文书
复活读书笔记
2015/06/29 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
redis lua限流算法实现示例
2022/07/15 Redis