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 幻灯片插件(带缩略图功能)
Jan 24 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
window.location.hash知识汇总
Nov 09 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
详解element-ui中表单验证的三种方式
Sep 18 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
Less 安装及基本用法
2018/05/05 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
python实现目录树生成示例
2014/03/28 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python中setuptools的作用是什么
2020/06/19 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
单位办理社保介绍信
2014/01/10 职场文书
怎样填写就业意向
2014/04/02 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
民事二审代理词
2015/05/25 职场文书
电影建国大业观后感
2015/06/01 职场文书
导游词之唐山景点
2019/12/18 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL
Redis 哨兵机制及配置实现
2022/03/25 Redis
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers