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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
js中eval详解
Mar 30 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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数据库大小的方法
2015/06/19 PHP
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python读取二进制mnist实例详解
2017/05/31 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python 如何上传包到pypi
2020/12/24 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
《可爱的动物》教学反思
2014/02/22 职场文书
个人自荐材料
2014/05/23 职场文书
诚信承诺书模板
2014/05/26 职场文书
土建工程师岗位职责
2014/06/10 职场文书
社会学专业求职信
2014/07/17 职场文书
三严三实对照检查材料
2014/08/25 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
培训通知书模板
2015/04/17 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书