编者按：本文是一位20岁的孟买小伙子Shamuil分享的，他是一位自由职业设计师和Blogger。 在全球访问量最高的前1000个网站中，几乎没有不用jQuery的。如今jQuery的力量是无限强大。本文将向你展示分享jQuery在表单方面 的强大，包括验证表单、密码遮罩表单和评论实时预览等。所以，不要错过本文哦，来看看当今jQuery的表单变化趋势吧。 1- jquery Form Validator2- Uniform 3- Autotab 4- jquery Niceforms 5- jQuery inline form v...
如下： 1：非Ajax 前台：对应后台：2：JQuery之Ajax 在介绍使用JQuery提交表单前，我们需要首先引用jquery.form.js，它来自于http://www.malsup.com/jquery/form/，至此，我们需要引用的JS文件有：功能要求：Ajax提交表单，在控制器HelloWorld4Controller中处理请求，并返回若干数据，数据格式为JSON。 首先，我们假设返回的JSON实体为： 代码如下: public class LoginResultDTO { public bool Success { get; set; } public stri...
$("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[type=radio]:checked").val(); /*获取一组名为(items)的radio被选中项的值*/ var item = $('input[name=items]:checked').val(); /*获取复选框的值*/ var checkboxval = $("#checkbox_id").attr("value")； /*获取下拉列表的值*/ va...
:enable 获取可输入状态的元素 :disabled 获取不可输入状态的元素 :checked 获取选中的表单元素 :seleced 获取下拉框中选中的元素 下面看一粒例子 Html 代码如下: JavaScript代码： 代码如下: jQuery(function(){ $("input:text:disabled").val("不能输入"); $("input:text:enabled").val("能输入"); ( function checkboxclick(){ $(":checkbox").unbind("click",checkboxclick); var vv=''; $(":checkbox:checked").ea...
代码如下: createElement .warpper{ border:1px solid red; padding:8px;} ///动态创建一个div $(function(){ $('',{ id:'test', text:"this is a div", "class":"warpper", click:function(){ var text=$(this).text(); alert(text); } }).appendTo("body"); }); //创建input:text $(function(){ $('',{ type:"text", val:"input text somethings...", name:"userName" }).appendTo("body"); }); //创建input select $(fu...
Form 表单 用法 代码如下: 使 form 成为 ajax 提交的 form 。 代码如下: $(#ff).form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提交 form $(#ff).submit(); 去做一个提交动作。 代码如下: // 调用 form 插件的 submit 方法来提交 form $(#ff).form(submit, { url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, ...
很显然，这样做能提升更好的用户体验。 html代码： 代码如下: jquery代码： 代码如下: $(function(){ $('form :input').blur(function(){ var $parent=$(this).parent(); $parent.find(".formtips").remove(); if($(this).is('#username')) { if(this.value==""||this.value.lengthvar msg="请输入至少6位用户名"; $(msg).appendTo($parent); }else{ var msg="输入正确"; $(msg).appendTo($parent); } } }).keyup(function(){...
通过下面的代码可以实现这种切换的效果。 首先我们来看界面： 界面代码： 代码如下: 脚本代码： 代码如下: Recipe2 $(document).ready(function () { $("input:text:first").focus(); // TextBox转换成html控件为 $("input:text").bind("keydown", function (e) { if (e.which == 13) { // 获取Enter键值 e.preventDefault(); // 阻止表单按Enter键默认行为，防止按回车键提交表单 var nextIndex = $("input:text").index...
枚举对象的使用： 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) { return true; } else { return f...
原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上. 其中也用了json数据格式, 之前想对插件中所需的功能,从零开始写,但是觉得太冗余,没必要.就基于另外2个plugin现实. 分别是:jquery.json 和 jStorage. 这两个插件本身实用小巧, api简单易用, 其中jStorage在老一点的浏览器(不支持原生JSON操作)中需要用到jquery.json或者json2 formStorage对jQuery对...
Niceforms Niceforms是一款独立的表单美化工具，当前版本为2.0 官方主页：http://www.emblematiq.com/lab/niceforms/ 官方演示：http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub：https://github.com/emblematiq/Niceforms 使用方法，在页面头部引入以下脚本及样式即可： 代码如下: /*此样式用于radio/checkbox后面的label在ie下可能不正常*/ .opt { padding-left: 8px; } imagesPath = "niceforms-v2...
先说说常用的Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。 1、最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2、Form插件下载 form.js 3、Form插件的简单入门 第一步：先增加一个表单 代码: 代码如下: 第二步：jquery.js和form.js文件的包含 代码: 代码如下: // wait for the DOM to be loaded $(document).ready(function() { // bind 'myForm' and provide a simple callback fu...
IE 暂不支持CSS： 代码如下: body{ margin:0; padding:0; } div{ margin:0; padding:0; } .container{ margin-left:10%; margin-right:10%; } ul li{ list-style:none; } ul{ padding:0; margin:0; } p.em{ color: red; ...
1. 页面效果，自动提示验证信息... 2. 页面代码 代码如下: 表单验证页面 $(function () { //加载验证信息 $('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) $(this).validatebox(); }) $('#ajax_test2').click(function () { $.ajax({ url: "../Handler1.ashx?Menthod=Login", type: 'post', data: {name:"123456"}, timeout: 30000, beforeSend: function (XMLHttpRe...
jQtransForm下载地址 http://www.gxlcms.com/jiaoben/25166.html用法 1- 添加脚本包含在标题部分的网页 代码如下: //required 2- 写你的 form 代码如下: 3- 最后使用插件 After it, select the forms and call the jqTransform plugin. See some examples: 代码如下: $(function() { //find all form with class jqtransform and apply the plugin $("form.jqtransform").jqTransform(); }); 兼容性：ie 6+, safari 2+,...