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.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- Android自定义Activity酷炫的动画跳转效果
两个Activity跳转的时候,自定义翻页效果: Intent intent = new Intent(FirstActivity.this, SecondActivity.class); sta ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- Html分组标签
<fieldset> <legend>权限种类</legend></fieldset>
- 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
- bootstrap2.3.2常用标签的使用
<!DOCTYPE html> <html lang="zh_CN"> <head> <title>Bootstrap 101 Te ...
- mysql alter example
alter table `user_movement_log` AFTER `Regionid` (在哪个字段后面添加) ) default null; //主键 ) unsigned not nul ...
- Expression Language
EL找不到属性会返回"" page –- request --- session --- application ------------------------------- ...
- Word2Vec在Tensorflow上的版本以及与Gensim之间的运行对比
接昨天的博客,这篇随笔将会对本人运行Word2Vec算法时在Gensim以及Tensorflow的不同版本下的运行结果对比.在运行中,参数的调节以及迭代的决定本人并没有很好的经验,所以希望在展出运行的 ...
- poj 3269 Building A New Barn
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- 脑波设备mindwave TGCD接口开发示例
对于TGCD的开发,神念科技提供的文件包括,头文件thinkgear.h,thinkgear.lib,thinkgear.dll,有这三个文件,在win32下开发就不是什么难事了吧 如果是java语言 ...