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 ajax 登录验证实现代码
Sep 23 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
vue中@change兼容问题详解
Oct 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和MySql来与ODBC数据连接
2006/10/09 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
网络编辑岗位职责
2014/03/18 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
关于运动会的广播稿
2014/09/22 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python