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 三种编解码方式
Feb 01 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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中调用JAVA
2006/10/09 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php 基础函数
2017/02/10 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
webpack HappyPack实战详解
2019/10/08 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
简洁的十分钟Python入门教程
2015/04/03 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python实现图片转字符画的示例
2017/08/22 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
pandas参数设置的实用小技巧
2020/08/23 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
打架检讨书100字
2014/01/08 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL