#表单利用Jquery验证验证以及ajax提交

概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验证等

。———-
环境准备在html中引入四个js文件(jquery文件,jquery.form文件,jquery.validate文件,jquery.validate.extend文件):

<script src =“/ jquery / jquery-1.8..min.js”type =“text / javascript”> </ script>
<script src =“/ jquery / jQuery.Form.js” type =“text / javascript”> </ script>
<script type =“text / javascript”src =“/ jquery / jquery.validate.js”charset =“UTF-”> </ script>
<script type =“ text / javascript“src =”/ jquery / jquery。validate.extend.js“charset =”UTF-“> </ script> ```
下载地址:[ jQuery插件之窗体:http://download.csdn.net/detail/s445320/9438163 ](http://download.csdn.net/detail/s445320/9438163 )[ jquery-1.8.3.min.js:http ://download.csdn.net/detail/s445320/9438161 ](http://download.csdn.net/detail/s445320/9438161 )[ jquery.validate.js:http://download.csdn.net/detail / s445320 / 9612201 ](http://download.csdn.net/detail/s445320/9612201 )[ jquery.validate.extend.js:http://download.csdn.net/detail/s445320/9616989 ](http: //download.csdn.net/detail/s445320/9616989 ) - **编写html区域(form及input)** ```
<form id =“inputForm”name =“inputForm”action =“../ xxxx / xxxxaccount”method =“post”novalidate =“novalidate”>
<input type =“text”name =“name”id =“name” class =“form-control required”value =“刘伟”onfocus = this.blur()>
</ form> ```
- ** 编写Javascript表单验证区域** ```
<script type =“text / javascript “>
$(document).ready(
function(){
$(”#inputForm“)。validate({
submitHandler:function(form){//验证通过后的执行方法
//当前的窗体通过ajax方式提交(用到jQuery.Form文件)
$(form).ajaxSubmit({
dataType:“json”,
成功:函数(jsondata){
if(jsondata.code = ){
alert("success");
}else{
alert("fail");
}
}
}); },
focusInvalid : true, //验证提示时,鼠标光标指向提示的input
rules : { //验证尺度
account : {
required : true, //验证非空
remote: { //远程ajax验证
url: "../xxxx/checkaccount", //检查是否存在账号,存在则返回true
type: "GET",
dataType: "json",
data: {
account: function () {
return $("#account").val(); //这个是取要验证的用户名
}
},
dataFilter: function (data) { //判断控制器返回的内容
var notice = eval("("+ data +")");
if( notice ){
return false;
}else{
return true;
}
}
}
},
},
messages : {
account : {
required : "用户名不能为空",
remote: "用户名已存在!" //这个地方如果不写的话,是自带的提示内容,加上就是这个内容。
}
},
errorElement : "div",
errorClass : "error_info",
highlight : function(element, errorClass,
validClass) {
$(element).closest('.form-control').addClass(
'highlight_red');
},
success : function(element) {
$(element).siblings('.form-control')
.removeClass('highlight_red');
$(element).siblings('.form-control').addClass(
'highlight_green');
$(element).remove();
} });
});
</script> 效果图如下:

原文链接:https://blog.csdn.net/s445320/article/details/50748975

Form表单利用Jquery Validate验证以及ajax提交的更多相关文章

  1. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  2. form表单下的button按钮会自动提交表单的问题

    form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net   form表单下的按钮在没有指定type类 ...

  3. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  4. jQuery插件 -- Form表单插件jquery.form.js<转>

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

  5. Form表单插件jquery.form.js

    常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法 <!-- 引入jquery文件 --> <script src="h ...

  6. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  8. form 表单 和 jQuery HTML / CSS 方法($().html 类似的样式)

    1 有关链接 :http://www.runoob.com/tags/tag-form.html https://www.cnblogs.com/Jxwz/p/4509618.html https:/ ...

  9. (转)jQuery插件 -- Form表单插件jquery.form.js

    beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...

随机推荐

  1. mysql升级后出现Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'userinfo.

    安装了mysql5.7,用group by 查询时抛出如下异常: Expression #3 of SELECT list is not in GROUP BY clause and contains ...

  2. HTML连载65-过渡模块的基本使用

    一.过渡模块的基本使用 1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上. 2.过渡三要素: (1)必须要有属性发生变化:(2)必须告诉系统哪个属性需要执行过渡效果:( ...

  3. Android之活动Activity用法

    Activity是Android的四大组件之一,本篇将通过Activity的生命周期,Intent的组成部分以及如何使用Intent进行页面之间的消息传递来介绍它的基本用法. 1.activity的生 ...

  4. BZOJ2809&&LG1552 APIO2012派遣(线段树合并)

    BZOJ2809&&LG1552 APIO2012派遣(线段树合并) 题面 自己找去 HINT 简化一题面就是让你从每个点的子树中以\(<=m\)的代价选取尽可能多的点,然后乘上 ...

  5. vue中的this.$nextTick()使用

    首先我们来翻译一下nextTick是什么意思:下一个刻度 再来看看vue官网怎么说的: Vue.nextTick( [callback, context] )在下次 DOM 更新循环结束之后执行延迟回 ...

  6. threadpool 实例介绍第二篇

  7. Spring Cloud 5大组件

    服务发现——Netflix Eureka 客服端负载均衡——Netflix Ribbon 断路器——Netflix Hystrix 服务网关——Netflix Zuul 分布式配置——Spring C ...

  8. python开发第二篇 :python基础

    python基础a.Python基础      -基础1. 第一句python       -python后缀名可以任意?     -导入模块时如果不是.py文件,以后的文件后缀名是.py.2.两种 ...

  9. SVN之TortoiseSVN使用02

    TortoiseSVN常用操作和安装eclipse的svn插件 一.关于TortoiseSVN的介绍 1. 安装TortoiseSVN图像化操作软件,便于操作SVN! 如图有两种版本的,一个是32位, ...

  10. Win10安装7 —— 系统的优化

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12371356.html 一:引言 在我们使用电脑的过程中,总是有一些窗口弹出来需 ...