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 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
Three.js基础学习教程
Nov 16 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
vue-router的hooks用法详解
Jun 08 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php无限遍历目录示例
2014/02/21 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
Cython 三分钟入门教程
2009/09/17 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python3解释器知识点总结
2019/02/19 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
法律系毕业生求职信
2014/05/28 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
培根随笔读书笔记
2015/07/01 职场文书
村官2015年度工作总结
2015/10/14 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫