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.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- My97DaePicker 用js实现文本框日期相减求天数
<tr> <td align="center" style="background-color: #cccccc;font ...
- Nutch
nutch 插件开发[资料整理]:http://my.oschina.net/cloudcoder/blog/472915 Nutch2.3+Mongodb+ElasticSearch:http:// ...
- 通过SecureCRT下载远程Linux服务器上的文件到本地Windows
sz 文件名[先cd到需要下载的文件的目录层] [root@is13084905-0233 bookinterface]# sz test.txt rz Starting zmodem transf ...
- http 请求安全
在info.plist中加入 <key>NSAppTransportSecurity</key><dict> <key>NSAllowsArbit ...
- [转]WIN7系统安装Apache 提示msvcr110.DLL
我的系统是WIN7 64位,安装配置Apache2.4.7(httpd-2.4.7-win64-VC11.zip )提示如下错误 VC++2012 2013 百度网盘地址:http://pan.bai ...
- symfony2-不同bundle的entity的一对多关系
重点:其实和普通一个bundle中一样,只是把entity地址写全就行. 例子: 表commentone (多方) 表shopone(一方) 在Userbundle中的Commentone实体对应关系
- SQL Server 内存不足引起的并发症
第一:cpu 1.内存不足就会有频繁的页面调入调出.这个过程是要有cpu的参与的.所以这个要影响cpu! 2.内存不足可能会引有用起执行计划被清除.当起次要执行时.这个就要重编译一次!
- java 如何得到ISO 8601 时间格式
http://blog.csdn.net/brightleo/article/details/7457004 public class DateUtil { public static String ...
- delphi datasnap 心跳包
为了能让我们的服务程序更加稳定,有些细节问题必须解决.就如上一讲中提到的客户端拔掉网线,造成服务器上TCP变成死连接,如果死连接数量过多,对服务器能长期稳定运行是一个巨大的威胁.另外,经过测试,如果服 ...
- QT中静态库的生成与使用——创建共享库代码，附例子
一. 静态库的生成 1. 测试目录: lib 2. 源码文件名: mywindow.h, mywindow.cpp, 类MyWindow继承于QPushButton, 并将文字设置为&qu ...