jQuery validate和form插件配套使用
参考
官网http://jqueryvalidation.org/documentation/
博客http://www.cnblogs.com/buzzlight/archive/2010/06/30/1768364.html(共5篇)
remote的使用（若根据官网总是不行）http://www.jquery4u.com/ajax/jquery-ajax-validation-remote-rule/
validate 与 form插件的结合使用http://www.cnblogs.com/qqloving/archive/2011/05/01/2034011.html
<html>
<head>
<meta charset="utf8">
</meta> </head> <body> <script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script> <form id="myForm2" action="comment.php" method="post">
<div> <input type="hidden" name="Hidden" value="hiddenValue">
<table>
<tbody>
<tr>
<td><label for="username">Username</label></td>
<td>
<input id="username" name="username" />
</td>
<!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 -->
<td></td>
</tr>
<tr>
<td><label for="Psw">Password:</label></td><td><!-- 这里的name的值要和下面rules的配置规则时用的名字对应 --><!-- 这里的id值并不影响对Psw这个输入框的检测--><!-- <input id="Psw1" name="Psw" class="Psw" type="password" value='12355'> ok!-->
<input id="Psw" name="Psw" type="password" value='12355'>
<!-- 上方的id值是因为下面有个rules用到了id选择器 来定位到这个元素
如果选择器中是.Psw 那么这里就需要指定class="Psw" --></td>
</tr>
<tr>
<td><label for="PswA">Password Again</label></td><td>
<input id="PswA" name="PswA" type="password" value='12355'>
</td>
</tr>
<tr>
<td><label>Email</label></td>
<td>
<input name="email" value="" id="email"/>
</td>
</tr>
<tr>
<td>Multiple:</td><td>
<select id="Mul" name="Multiple" multiple="multiple">
<optgroup label="Group 1">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</optgroup>
<optgroup label="Group 2">
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option> </optgroup>
</select></td>
</tr>
<tr>
<td>Single:</td><td>
<select name="Single" >
<!-- <option value="one" selected="selected">One</option> -->
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select></td>
</tr> <tr>
<td>Single2:</td><td>
<select name="Single2">
<optgroup label="Group 1">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
</optgroup>
<optgroup label="Group 2"> <option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</optgroup>
</select></td>
</tr>
<tr>
<td><label for="language">check</label></td><td>
<input type="checkbox" name="language" value="cn" />
汉语
<input type="checkbox" name="language" value="en" />
英语
<input type="checkbox" name="language" value="jp" />
日语
<input type="checkbox" name="language" value="ge" />
德语 </td>
<!-- 对于多个input 一定要指定提示信息的位置
否则提示信息就会放在第一个input之后 -->
<td><span class="language"></span></td>
</tr>
<tr>
<td><label for="lang">check for php</label></td><td>
<input type="checkbox" name="lang[]" value="cn" class="ignore"/>
汉语
<input type="checkbox" name="lang[]" value="en" class="ignore"/>
英语
<input type="checkbox" name="lang[]" value="jp" class="ignore"/>
日语
<input type="checkbox" name="lang[]" value="ge" class="ignore"/>
德语 </td>
<td>
<input type="button" id="check" value="check"/>
<span id="lang"></span></td> </tr>
<tr>
<td>Radio:</td><td>
<input type="radio" name="rad" value="radio1"/>
<input type="radio" name="rad" value="radio2" />
<input type="radio" name="rad" value="radio3" />
</td>
<td><span class="rad"></span></td>
</tr>
<tr>
<td>Text:</td><td> <textarea id="Txt" name="Text" rows="2" cols="20">This is Form2</textarea></td>
</tr> </tbody>
</table>
<input type="reset" name="resetButton " value="Reset">
<input type="submit" name="submitButton" value="Submit1" id="#submit">
</div>
</form>
<div id='output1'> </div>
<div id="output2"> </div> <script type="text/javascript">
$().ready(function() {
var options = {
target : '#output2', // target element(s) to be updated with server response
beforeSubmit : checkFields, // pre-submit callback
success : showResponse // post-submit callback
};
$("#myForm2").validate({
submitHandler:function(form) {
$("#myForm2").ajaxSubmit(options);
},
rules : {
username : "required", /*仅有required没有其他规则 且没有输入值的话 只会在提交的时候才给出输入值的提示*/
Psw : {
required : true,
minlength : 5
},
PswA : {
required : true,
minlength : 5,
equalTo : "#Psw"
},
email : {
required : true,
email : true,
remote : {
url:"check-email.php",
type:'get',
data:{
email: function(){
return $('input[name="email"]').val();
}
},
dataType:'json'
}
},
Multiple : {
required : true
},
Single : {
required : true
},
Single2 : {
required : true
},
language : {
required : true,
minlength : 2 /*至少选择2项*/
},
rad : {
required : true
} },
messages : {
username : "请输入姓名",
email : {
required : "请输入Email地址",
email : "请输入正确的email地址",
remote : "换一个email"
},
Psw : {
required : "请输入密码",
minlength : jQuery.format("密码不能小于{0}个字 符")
},
confirm_password : {
required : "请输入确认密码",
minlength : "确认密码不能小于5个字符",
equalTo : "两次输入密码不一致不一致"
}
},
errorPlacement : function(error, element) {
if (element.attr("name") == "language") {
error.insertAfter(".language");
} else if(element.attr("name")=="rad"){
error.insertAfter(".rad");
}else {
error.insertAfter(element);
}
},
focusCleanup : true, /*得到焦点时清除错误信息*/
ignore : ".ignore" /*对于这样的元素不检测*/
}); });
function checkFields(formData, jqForm, options) {
var len = $("input[name='lang[]']:checked").length;
if (len < 2) {
//alert('AT LEAST TWO');
$("#lang").text("至少选2个");
return false;
}
} function showResponse(responseText, statusText, xhr, $form) {
$("#output1").text('showResponse status: ' + statusText +'\n' );
$("#output1").append(responseText);
}
</script>
</body> </html>
comment.php
<?php
$name=$_REQUEST['username'];
$psw=$_REQUEST['Psw'];
$muti=$_REQUEST['Multiple'];
$sin=$_REQUEST['Single'];
$sin2=$_REQUEST['Single2'];
$che=$_REQUEST['lang'];
$radio=$_REQUEST['rad']; $checkStr='';
foreach ($che as $key => $value) {
$checkStr=$checkStr.$value.' ';
}
echo 'name '.$name.'</br>';
echo 'psw '.' '.$spw.'</br>';
echo 'muti '.$muti.'</br>';
echo 'single '.$sin.'</br> ';
echo 'single 2 '.$sin2.'</br>';
echo 'radio '.$radio.'</br>';
echo 'check '.$checkStr ; ?>
check-email.php
<?php
$email=$_REQUEST['email'];
$valid="";
if($email=="111@qq.com"){
$valid= "false";
}else {
$valid="true";
}
echo $valid;
?>
jQuery validate和form插件配套使用的更多相关文章
- jQuery.validate 的form校验
jQuery验证框架 : 基本html代码: <script src="js/jquery-1.9.1.js"></script> <script s ...
- jquery.validate.unobtrusive.js插件作用
在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.valida ...
- jQuery easyui 扩展form插件的三个方法
$.extend($.fn.form.methods, { serialize: function(jq){ var arrayValue = $(jq[0]).serializeArray(); v ...
- jquery.validate，错误信息位置
好长时间没有用jquery.validate.js这个插件了,忘得差不多了.唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问 ...
- jquery.validate.js表单验证 jquery.validate.js的用法
jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- JQuery validate.js 在ajax提交form时如何触发
在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- C#高级编程三十天----泛型结构,泛型方法,泛型托付
泛型结构 泛型结构和泛型类差点儿是一直的,仅仅是泛型结构没有继承的特性..NET平台提供的一个泛型结构是(可空类型)Nullablle<T>.可空类型的引入,主要是为了解决数据库语言中的数 ...
- （转）探讨：ASP.NET技术的学习顺序问题
探讨:ASP.NET技术的学习顺序问题 摘要:很多人对于ASP.NET的入门和学习顺序比较迷茫,今天让我们一起来跟随作者的思路学习探讨ASP.NET的学习顺序问题,希望有所帮助. 如果你已经有较多的面 ...
- ORACLE恢复误删除的对象(表、存储过程等)
1.恢复存储过程 原理就是利用了oracle里所有的存储过程的源代码都是存在dba_source里,而drop某个存储过程的时候,oracle这里肯定要去dba_source里把相关的源代码给dele ...
- 获取文件数据流+叠加byte数组（给byte数组加包头包尾）
OpenFileDialog ofd = new OpenFileDialog(); ofd.Filter = "(*.mp4)|*.mp4|(*.*)|*.*"; ofd.Res ...
- Linux各个发行版本的介绍, 以及VirtualBox+CentOS的安装步骤
Linux和Unix系统有哪些主要的发行版本 Unix: (非开源传统商业操作系统) IBM AIX, HP HP-UX, Sun Solaris,等 各家硬件厂商的发行版本, 往往是和自家的硬件设备 ...
- Netty4.0学习教程
http://blog.csdn.net/u013252773/article/details/21046697 一些属性和方法介绍 http://blog.csdn.net/zxhoo/articl ...
- Qt Style Sheet实践（一）：按钮及关联菜单（24K纯开源，一共四篇）
导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...
- Qt监测光驱变化（使用WM_DEVICECHANGE）
xxx.h protected: bool winEvent(MSG *msg,long * result); xxx.cpp bool CBlurayTranscoderDlg::winEvent( ...
- Jsoup代码解读之一-概述
Jsoup代码解读之一-概述 今天看到一个用python写的抽取正文的东东,美滋滋的用Java实现了一番,放到了webmagic里,然后发现Jsoup里已经有了…觉得自己各种不靠谱啊!算了,静下心来学 ...
- SPOJ 8222 Substrings（后缀自动机）
[题目链接] http://www.spoj.com/problems/NSUBSTR/ [题目大意] 给一个字符串S,令F(x)表示S的所有长度为x的子串中,出现次数的最大值. 求出所有的F. [题 ...